使用chrome插件来开发数据库增删改查 QQ313801120

使用chrome插件来开发数据库增删改查
作者：sharembweb 发表于：2018-02-04 17:16:23
视频观看地址：

源码下载地址：
github下载

代码部分：


manifest.json
{
    "manifest_version": 2,
    "name": "数据库增删改查",
    "description": "使用chrome插件来开发 数据库增删改查 由喜欢TA QQ313801120原创制作",
    "version": "1.0",
    "browser_action": {
        "default_title": "数据库增删改查",
        "default_icon": "XiYueTa313801120.png",
        "default_popup": "xiyueta313801120.html"
    },
    "content_scripts": [{
        "matches": [
            "<all_urls>"
        ],
        "js": ["content.js"]
    }]
}


background.js
console.log("数据库增删改查 background run");


content.js
//使用chrome插件来开发 数据库增删改查
console.log("数据库增删改查");


xiyueta313801120.html
<!DOCTYPE HTML>
<html>
<head>
    <title>Web SQL Database</title>
</head>
<body>
    <div style="width: 500px;">
<a href="javascript:showAddEditLayout('');">添加一条新的</a>   
<div id="showData"> 
</div>
<div id="addEditDialogLayout">
  姓名
  <input type="text" name="name" id="name"> 
  <a href="#" id="button" title="">添加</a>
</div>
</div>
<script src="xiyueta313801120.js"></script>


xiyueta313801120.js
var pubID = "";
//默认创建数据库
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function(context) {
    context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
    context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "喜悦TA")');
    context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "313801120")');
    context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "xiyueta")');
});
showData()
document.getElementById("addEditDialogLayout").style.display = "none"

//提交添加修改
function submitAddEdit() {
    var butTitle = pubID == "" ? "确认添加" : "确认修改";
    var name = document.getElementById('name').value
    if (pubID != "") {
        editData(pubID, name)
    } else {
        addData(name)
    }
    alert(butTitle + "成功")
    showData()
}
//显示添加修改界面
function showAddEditLayout(id) {
    var butTitle = ""
    if (id == "" || id == undefined) {
        butTitle = "添加"
        pubID = "" 
    } else {
        pubID = id
        butTitle = "修改"

        db.transaction(function(context) {
            context.executeSql('SELECT * FROM testTable where id=' + id, [], function(context, results) {
                document.getElementById('name').value = results.rows.item(0).name
            });
        });


    }
    document.getElementById('addEditDialogLayout').style.display = ''
    document.getElementById('button').innerHTML = "确认"+butTitle
}
//显示列表
function showData() {
    db.transaction(function(context) {
        context.executeSql('SELECT * FROM testTable', [], function(context, results) {
            var len = results.rows.length,
                i, id;
            //console.log('Got '+len+' rows.');
            var s = "",
                c = "<table width='100%' border='1' cellspacing='0' cellpadding='0'>";
            c += "<tr><td>ID</td><td>姓名</td><td>操作</td></tr>"
            for (i = 0; i < len; i++) {
                id = results.rows.item(i).id
                name = results.rows.item(i).name
                s = "<a href=\"javascript:showAddEditLayout('" + id + "')\" title='" + id + "' class='edit'>修改</a> | <a href='javascript:delData(" + id + ");' title='" + id + "' class='del'>删除</a>"
                c += "<tr><td>" + id + "</td><td>" + name + "</td><td>" + s + "</td></tr>"



            }
            c += "</table>"
            document.getElementById("showData").innerHTML = c;



            var a = document.getElementsByTagName("a")
            for (var i = 0; i <= a.length; i++) {
                var oBtn = a[i]
                oBtn.onclick = function(e) {
                    var s = this.innerHTML 
                    if (s == "添加一条新的") {
                        showAddEditLayout('');
                    } else if (s == "确认添加") {
                        submitAddEdit()
                    } else if (s == "确认修改") {
                        submitAddEdit() 
                    } else if (s == "修改") {
                        showAddEditLayout(this.title)
                    } else if (s == "删除") {
                        delData(this.title)

                    }
                };
            }

        });
    });
    return "";
}
//添加记录
function addData(val) {
    db.transaction(function(context) {
        context.executeSql('SELECT * FROM testTable order by id desc', [], function(context, results) {
            var len = results.rows.length
            if (results.rows.length > 0) {
                var id = results.rows.item(0).id + 1
                db.transaction(function(context) {
                    context.executeSql("INSERT INTO testTable (id, name) VALUES (" + id + ",'" + val + "')");
                    showData()
                });
            }
        });
    });

}
//修改记录
function editData(id, val) {
    db.transaction(function(context) {
        context.executeSql("UPDATE testTable set name='" + val + "' where id=" + id);
    });
}
//删除记录
function delData(id) {
    db.transaction(function(context) {
        context.executeSql('delete FROM testTable where id=' + id);
        alert("删除ID（" + id + "）成功")
        showData()
    });
}
万水千山总是情，微信关注行不行
PAAJCMS二维码
评论
验证码：
期待你一针见血的评论，Come on！
使用chrome插件来开发 数据库增删改查

使用chrome插件来开发数据库增删改查
