前几天看到一个小姐姐问我一个添加修改的我看了一下案例弄了一个出来。。。。
参考案例：HTML5本地数据库(WebSQL)[转] - 狂流 - 博客园 https://www.cnblogs.com/kuangliu/p/4772683.html
增删查改的基本操作：H5-WebSQL的增删改查（Demo） - 壹言——越过山丘 才发现无人等候 - CSDN博客 https://blog.csdn.net/vcx08/article/details/81942348
下面是我的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="websql.aspx.cs" Inherits="websql" %> <!DOCTYPE> <html> <head> <!--<script src="http://172.30.204.23:8080/iis/js/jquery/jquery.js" type="text/javascript"></script>--> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <!--加入JS的一个框架 --> <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/> <!--表格样式--> <style type="text/css"> /*.table,table tr th, table tr td { border:1px solid #0094ff; }*/ #tab1 th, td,tr { border:1px solid #4cff00; } .btn { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; /*for <a> link*/ margin: 2px; border: 1px solid transparent; border-radius: 4px; padding: .5em 1em; color: #fff; background-color: #ff0000; } .ubtn { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; /*for <a> link*/ margin: 2px; border: 1px solid transparent; border-radius: 4px; padding: .5em 1em; color: #fff; background-color: #49ff00; } </style> <script type="text/javascript"> function initDatabase() { var db = getCurrentDb();//初始化数据库 if (!db) { alert("您的浏览器不支持HTML5本地数据库"); return; } db.transaction(function (trans) {//启动一个事务，并设置回调函数 //执行创建表的Sql脚本 trans.executeSql("create table if not exists Demo(id int primary key,uName text null,title text null,types text null)", [], function (trans, result) { }, function (trans, message) {//消息的回调函数 alert(message); }); }); } //随机数 function RndNum(n) { var rnd = ""; for (var i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10); return rnd; } //添加 $(function () { //alert(111); initDatabase(); $("#btnSave").click(function () { var txtName = $("#txtName").val(); var txtTitle = $("#txtTitle").val(); //var txtTypes = $("#txtTypes").val(); var txtTypes = $("#sel option:selected").val(); var db = getCurrentDb(); var myDate = new Date(); var num = ""; num += myDate.getYear(); num += myDate.getMonth(); num += myDate.getDate(); num += RndNum(4); //执行sql脚本，插入数据 if (txtTypes == "1") { alert("请选择类型！"); } else { db.transaction(function (trans) { trans.executeSql("insert into Demo(id,uName,title,types) values(?,?,?,?) ", [num,txtName, txtTitle, txtTypes], function (ts, data) { }, function (ts, message) { alert(message); }); }); showAllTheData(); } }); }); function getCurrentDb() { //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小 //如果数据库不存在那么创建之 var db = openDatabase("myDb", "1.0", "it's to save demo data!", 2*1024 * 1024);; return db; } //显示所有数据库中的数据到页面上去 function showAllTheData() { //$("#tblData").empty(); $("#tab1").empty(); var db = getCurrentDb(); db.transaction(function (trans) { trans.executeSql("select * from Demo ", [], function (ts, data) { if (data) { var txtName = data.uName; var txtTitle = data.title; var types = data.types; var strHtml = ""; var dv = document.getElementById("dv"); var reslut = "<table id='tab1'>"; reslut += "<tr><th>id</th><th>姓名</th><th>标题</th><th>类型</th><th>操作</th></tr>"; for (var i = 0; i < data.rows.length; i++) { //var row = data[i]; // msg = msg + "<tr> <td><input type="button" class="btn btn-danger" name="" + results.rows.item(i).id + "" value="delete" onclick="tests(this.name)"></td></tr> "; reslut += "<tr><td>" + data.rows.item(i)['id'] + "</td><td>" + data.rows.item(i)['uName'] + "</td><td>" + data.rows.item(i)['title'] + "</td><td>" + data.rows.item(i)['types'] + "</td><td><input type="button" class="btn " name="" + data.rows.item(i)['id'] + "" value="delete" onclick="tests(this.name)"><input type="button" value="update" class="ubtn" id="" + data.rows.item(i)['id'] + "" name="" + data.rows.item(i)['id'] + "" onclick="utests(this.name)"/></td></tr>"; //<td>" + (i + 1) + "</td> //appendDataToTable(data.rows.item(i));//获取某行数据的json对象 dv.innerHTML = reslut; } } }, function (ts, message) { alert(message); var tst = message; }); }); } function appendDataToTable(data) {//将数据展示到表格里面 //uName,title,words var txtName = data.uName; var txtTitle = data.title; var types = data.types; var strHtml = ""; var dv = document.getElementById("dv"); var data = "<table id='tab1'>"; data += "<tr><th>姓名</th><th>标题</th><th>类型</th></tr>"; data += "<tr><td>" + txtName + "</td><td>" + txtTitle + "</td><td>" + types + "</td></tr>"; //dv.innerHTML = data; //$("#dv").append(data);; // strHtml += "<tr><th>姓名</th><th>标题</th><th>类型</th></tr>"; /*strHtml += "<tr>"; strHtml += "<th>"; strHtml += "<td>" + txtName + "</td>"; strHtml += "<td>" + txtTitle + "</td>"; strHtml += "<td>" + types + "</td>"; strHtml += "</th>"; strHtml += "</tr>"; $("#tblData").append(strHtml);*/ //tblData.innerHTML = strHtml; } //执行事务 function sqlExcute(sql, message) { var db = getCurrentDb(); db.transaction( function (trans) { trans.executeSql( sql, [], function () {//success alert(message); }, function (trans, ex) { alert(ex.message) } ); }, function () { alert("事务执行失败，建议使用谷歌浏览器") }, function () {//success } ); }; //删除数据 function tests(mes) { //alert(mes); if (confirm("是否删除此用户？id为:" + mes) == true) { del(mes); } showAllTheData(); //showUserInfo(); }; function del(id) { // var db = getCurrentDb(); //db.transaction(function (trans){ //trans.executeSql("delete * from Demo where uNmae='a'"); var sql = "delete from Demo where id = " + id + ""; sqlExcute(sql, "成功删除信息！"); // }); } //修改数据 function utests(mes) { //alert(mes); //showUserInfo(); var uptable = document.getElementById("tab1"); for (var i = 0; i < uptable.rows.length; i++) { //alert(uptable.rows[i].cells[1].getAttribute("contentEditable")); if (mes == uptable.rows[i].cells[0].innerHTML) { //alert(uptable.rows[i].cells[1].getAttribute("contentEditable")); //uptable.rows[i].cells[1].focus(); if (uptable.rows[i].cells[1].getAttribute("contentEditable") == null) { uptable.rows[i].cells[1].setAttribute("contentEditable", "true"); uptable.rows[i].cells[2].setAttribute("contentEditable", "true"); document.getElementById(mes).setAttribute("class", "ubtn"); document.getElementById(mes).setAttribute("value", "save"); uptable.rows[i].cells[1].focus(); } else { //alert("ddd"); var sql = "update Demo set uName='" + uptable.rows[i].cells[1].innerHTML + "',title='" + uptable.rows[i].cells[2].innerHTML + "' where id = " + mes + ""; sqlExcute(sql, "成功修改账号信息！"); showAllTheData(); } } } //showUserInfo(); }; </script> </head> <body> <h1 style="font-size:50px;color:#00ffa1">websql操作</h1> <div style="350px; border:1px solid #4cff00"> <tr> <td>用户名：</td> <td><input type="text" name="txtName" id="txtName" required/></td> </tr><br /> <tr> <td>标 题：</td> <td><input type="text" name="txtTitle" id="txtTitle" required/></td> </tr><br /> <tr> <td>分 类：</td> <!--<td><input type="text" name="txtTypes" id="txtTypes" required/></td>--> <td> <select id="sel" name="sel" style="150px;height:20px; margin-top:20px" > <option value ="1">--请选择--</option> <option value ="水果">水果</option> <option value ="蔬菜">蔬菜</option> <option value="豆类">豆类</option> <option value="大米">大米</option> </select> </td> </tr><br /> <input type="button" value="添加" id="btnSave"/> </div> <hr style="350px; color:#b200ff;float:left"/><br /> <input type="button" value="全部数据" onclick="showAllTheData();"/> <div id="dv"> <table id="tblData"></table> </div> <!--<table id="tblData" border="1" style="width=50%"> </table>--> </body> </html>
运行效果图：
f12 浏览器 查看 数据库：
哈哈 写得不好，如有什么错误，请留言告知。