sasasa

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.2/jsrender.min.js"></script>

        <script id="row" type="text/x-jsrender">
            <tr>
                <td>{{:name}}</td>
                <td>{{:phone}}</td>
                <td>
                    <input type="button" id="btnEdit" value="編輯" cid="{{:name}}" />
                    <input type="button" id="btnDelete" value="刪除" cid="{{:name}}" />
                </td>
            </tr>
        </script>

        <script id="rowEdit" type="text/x-jsrender">
            <tr>
                <td>{{:name}}</td>
                <td>
                    <input type="text" id="phone" value="{{:phone}}" />
                </td>
                <td>
                    <input type="button" id="btnUpdate" value="更新" cid="{{:name}}" />
                    <input type="button" id="btnCancel" value="取消" />
                </td>
            </tr>
        </script>

        <script>

            function openDB(callback, storename)
            {
                var request = window.indexedDB.open("DB1", 2);
                request.onsuccess = function(e){
                    var db = request.result;

                    if (storename) {
                        var tran = db.transaction(storename, "readwrite");
                        var store = tran.objectStore(storename);
                        callback(db, store);
                    }
                    else
                        callback(db);
                };
                request.onupgradeneeded = function(e){
                    var db = e.target.result;
                    alert("OK");
                    if (e.oldVersion < 1) {
                        var store = db.createObjectStore("contacts", { keyPath: "name" });
                    }
                    if (e.oldVersion < 2) {
                        var store = request.transaction.objectStore("contacts");
                        var indexName = store.createIndex("index_name", "name", { unique: true });
                        var indexPhone = store.createIndex("index_phone", "phone", { unique: false });
                    }
                };
            }

            function show(phone) {
                $("#t1 tr:gt(0)").remove();

                openDB(function(db, store){
                    var request;
                    if (!phone)
                        request = store.openCursor();
                    else {
                        var index = store.index("index_phone");
                        request = index.openCursor(IDBKeyRange.only(phone));
                    }

                    request.onsuccess = function(e) {
                        var cursor = e.target.result;
                        if (cursor) {
                            var html = $.templates("#row").render(cursor.value);
                            $(html)
                                .find("#btnDelete").click(function(){
                                    var key = $(this).attr("cid");
                                    if (confirm(`確定要刪除 ${key} 嗎?`)) {
                                        openDB(function(db, store){
                                            var reqDelete = store.delete(key);
                                            reqDelete.onsuccess = function(){
                                                show();
                                            };
                                        }, "contacts");
                                    }
                                }).end()
                                .find("#btnEdit").click(function(){
                                    var key = $(this).attr("cid");
                                    var tr = $(this).parent().parent();
                                    openDB(function(db, store){
                                        var reqGet = store.get(key);
                                        reqGet.onsuccess = function(){
                                            var obj = reqGet.result;
                                            var html = $.templates("#rowEdit").render(obj);
                                            $(html)
                                                .find("#btnUpdate").click(function(){
                                                    var key = $(this).attr("cid");
                                                    var phone = $(this).parent().parent().find("#phone").val();
                                                    openDB(function(db, store){
                                                        var reqGet2 = store.get(key);
                                                        reqGet2.onsuccess = function(){
                                                            var obj2 = reqGet2.result;
                                                            obj2.phone = phone;
                                                            store.put(obj2).onsuccess = function(){
                                                                show();
                                                            };
                                                        };
                                                    }, "contacts");
                                                }).end()
                                                .find("#btnCancel").click(function(){
                                                    show();
                                                }).end()
                                                .replaceAll(tr);
                                        };
                                    }, "contacts");
                                }).end()
                                .appendTo("#t1");
                            cursor.continue();
                        }
                    };
                }, "contacts");
            }


            $(function(){
                show();

                $("#btnAdd").click(function(){
                    var obj = {
                        name: $("#name").val(),
                        phone: $("#phone").val()
                    };

                    openDB(function(db, store){
                        var req = store.add(obj);
                        req.onsuccess = function(e) {
                            show();
                        };
                    }, "contacts");


                });

                $("#btnSearch").click(function(){
                    var phone = $("#phone").val();
                    show(phone);
                });
            });
        </script>
    </head>
    <body>
        Name: <input type="text" id="name" /><br />
        Phone: <input type="text" id="phone" />
        <input type="button" id="btnSearch" value="搜尋" />
        <br />
        <input type="button" id="btnAdd" value="新增資料" />
        <table id="t1" border="1">
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th></th>
            </tr>
        </table>
    </body>
</html>