IndexedDB-增删数据

IndexedDB
编号	名称	价格	删除
商品信息名称
价格
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h1>IndexedDB </h1>
    <input value="创建库" style="background-color: rgb(111, 111, 235); border: 0px;" type="button" onclick="create()" />
    <input type="button" style="background-color: rgb(111, 111, 235); border: 0px;" value="删除表"><br>
    <br>

        <table border="1" id="tabGoods"cellspacing="0" style="width: 800px;  border: 2px solid blue;" >
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>删除</th>
            </tr>
        </table>

        <fieldset  style="width: 800px;border: 2px solid blue;">
            <legend >商品信息</legend>
            <label for="name">名称</label>
                <input type="text" name="id" id="id" value="" />
            
            <p>
                <label for="name">价格</label>
                <input type="text" name="name" id="name" value="" />
            </p>
            <p>
                <input type="button" style="background-color: rgb(111, 111, 235); border: 0px;" id="btnSubmit" value="添加" />
                <input type="button" style="background-color: rgb(111, 111, 235); border: 0px;" id="btnUpdate" value="更新" />
            </p>
        </fieldset>

        <h3 id="msg"></h3>
        <script src="/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var db;

            function init() {
                create();

                $("body").on("click", "#btnSubmit", {}, function() {
                    add();
                });

                $("#tabGoods").on("click", ".del", {}, function() {
                    if(confirm('确定要删除？')) {
                        var tr = $(this).closest("tr");
                        del(tr.data("goods").id, function() {
                            alert('删除成功！');
                            tr.remove();
                        });
                    }
                });

                $("#tabGoods").on("click", ".edit", {}, function() {
                    var tr = $(this).closest("tr");
                    var obj = tr.data("goods");
                    $("#id").val(obj.id).prop("disabled", "disabled");
                    $("#name").val(obj.name);
                    // $("#price").val(obj.price);
                });

                $("body").on("click", "#btnUpdate", {}, function() {
                    var obj = {
                        "id": $("#id").val(),
                        "name": $("#name").val(),
                    };
                    edit(obj, function() {
                        alert('修改成功！');
                        getAll();
                    });
                    $("#id").val(obj.id).removeProp("disabled");
                });

            }
            init();

            function create() {
                var request = indexedDB.open("gomallPro", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建成功！');
                    getAll();
                };
                //失败时
                request.onerror = function(e) {
                    log("错误：" + e.target.errorCode || e.target.error);
                };
                request.onupgradeneeded = function(e) {
                    e.target.result.createObjectStore("goods", {
                        "keyPath": "id"
                    });
                    log("初始化数据库成功！");
                };
            }

            //新增数据
            function add() {
                var tx = db.transaction("goods", "readwrite");
                var goods = tx.objectStore("goods");
                var item = {
                    "id": $("#id").val(),
                    "name": $("#name").val(),
                    "price": $("#price").val()
                };
                goods.add(item);
                log("添加成功！");
                getAll();
            }

            //更新对象
            function edit(item, callback) {
                var tx = db.transaction("goods", "readwrite");
                var goods = tx.objectStore("goods");

                //执行更新
                var request = goods.put(item);
                request.onsuccess = function(e) {
                    log(e.target.result);
                    if(callback) callback();
                };
            }

            //删除对象
            function del(key, callback) {
                var tx = db.transaction("goods", "readwrite");
                var goods = tx.objectStore("goods");
                var request = goods.delete(key);
                request.onsuccess = function(e) {
                    log(e.target.result);
                    log("删除成功！");
                    if(callback) callback();
                };
            }

            var index;
            function getAll() {
                index = 1;
                $("#tabGoods tr:gt(0)").remove();
                var tx = db.transaction("goods", "readwrite");
                var goods = tx.objectStore("goods");
                var request = goods.openCursor();
                request.onsuccess = function(e) {
                    var cursor = e.target.result;
                    if(cursor) { 
                        var obj = cursor.value;
                        genTr(obj);
                        cursor.continue();
                    }
                };
            }

            function genTr(goods) {
                var tr = $("<tr/>").data("goods", goods);
                $("<td/>").html(index++).appendTo(tr);
                $("<td/>").html(goods.id).appendTo(tr);
                $("<td/>").html(goods.name).appendTo(tr);

                var btnDel = $("<input type='button' value='删除' style='background-color: rgb(111, 111, 235); ' class='del'/>");
                var btnEdit = $("<input type='button' value='编辑' style='background-color: rgb(111, 111, 235); ' class='edit'/>");

                $("<td/>").append(btnDel).append(btnEdit).appendTo(tr);

                tr.appendTo($("#tabGoods"));
            }
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML+=m+"<br/>";
            }
        </script>
    </body>
</html>
posted @ 2022-03-02 11:18 33的男孩阅读(51) 评论(0) 收藏举报
刷新页面返回顶部
IndexedDB-增删数据

IndexedDB

公告
