<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <script src="js/mui.min.js"></script> <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() </script> <style type="text/css"> td { text-align: center; } a { cursor: pointer; font-size: 13px; } a:hover { color: red; } label { color: red; font-size: 12px; } </style> </head> <body> <table id="tabBook" border="1px" cellspacing="0" cellpadding="0"> <tr> <th width="220px">编号</th> <th width="220px">书名</th> <th width="220px">作者</th> <th width="220px">编辑</th> </tr> </table> <fieldset id=""> <legend>图书信息</legend> 书名：<input type="text" id="txtName" /><br /> 作者： <input type="text" id="txtAuthor" /><br /> <input type="hidden" name="txthidden" id="txthidden" value="" /> <input type="button" id="btnAdd" onclick="addBook()" value="添加" /> <input type="button" id="btnAdd" onclick="updating()" value="更新" /> </fieldset> <script type="text/javascript"> var db = openDatabase("MyBook", 1.0, "我的图书", 1024 * 1024 * 1024, null, null); if(db) log("已创建或已找到数据库！请操作~！"); //加载数据到表格 addTable(); //添加图书信息 function addBook() { var sql = "create table if not exists BookInfo(id integer primary key autoincrement,BookName text,Author text)"; db.transaction(function(tx) { tx.executeSql(sql);//向数据库添加表 //插入数据 tx.executeSql("insert into BookInfo(BookName,Author) values(?,?)", [$("#txtName").val(), $("#txtAuthor").val()], function(tx, result) { log("您已添加成功！"); addTable(); //清空文本框 $("#txtName").val(""); $("#txtAuthor").val(""); }, function(tx, error) { log("很遗憾，添加失败！") }) }); } // 加载数据到表格 function addTable() { db.transaction(function(tx) { tx.executeSql( "select id,BookName,Author from BookInfo", [], function(tx, rs) { var len = rs.rows.length; var tab = $("#tabBook"); var Tr = $("#tabBook tr:first").clone(); tab.empty(); tab.append(Tr); if(len > 0) { for(var i = 0; i < len; i++) { var id = rs.rows.item(i)["id"]; var name = rs.rows.item(i)["BookName"]; var author = rs.rows.item(i)["Author"]; var tr = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + author + "</td><td><a id='" + id + "' onclick='Del(this.id)'>删除</a> | <a id='" + id + "' onclick='Update(this.id)'>修改</a></td></tr>"; $("#tabBook").append(tr); } } }, function(tx, error) { log("你还未成功添加图书信息！"); }); }) } //删除书籍信息 function Del(aid) { db.transaction(function(tx) { tx.executeSql("delete from BookInfo where id=?", [aid], function(tx, result) { var al = confirm("确定要删除吗？"); if(al) { $("#" + aid).closest("tr").remove(); } else { log("您已取消操作！") } }, function(tx, error) { log("错误：" + error.Message); }); }) } //将所选书籍信息加载到文本框 function Update(aid) { var id = $("#" + aid).parent().parent().children("td:eq(0)").text(); var name = $("#" + aid).parent().parent().children("td:eq(1)").text(); var author = $("#" + aid).parent().parent().children("td:eq(2)").text(); $("#txthidden").val(id); $("#txtName").val(name); $("#txtAuthor").val(author); log("请在下面文本框中先修改所选书籍，再点击更新按钮进行修改！") } //修改所选书籍信息 function updating() { var id = $("#txthidden").val(); var name = $("#txtName").val(); var author = $("#txtAuthor").val(); db.transaction(function(tx) { tx.executeSql("update BookInfo set BookName=?,Author=? where id=?", [name, author, id], function(tx, result) { addTable(); log("数据已更新成功！") }, function(tx, error) { log("更新失败，请重试！"); }) }) } //记录操作步骤 function log(msg) { var lbl = "<label>" + msg + " </label><br />"; $("body").append(lbl); } </script> </body> </html>
--老白菜原创