源码下载地址:
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() }); }
万水千山总是情,微信关注行不行

网友评论:
赞一个
2020-07-24 16:26:24 回复
网友评论:
学习了
2020-07-24 16:26:24 回复