前幾天看到一個小姐姐問我一個添加修改的我看了一下案例弄了一個出來。。。。
參考案例：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="width: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="width: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="width: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 瀏覽器 查看 數據庫：
哈哈 寫得不好，如有什么錯誤，請留言告知。