defaultList = "<caption><h3>我们的花名册</h3></caption><tr><th>序号</th><th>姓名</th><th>操作</th></tr><tr id=\"item1\" class=\"item\">",
loadingList = "<td colspan=\"3\">数据加载中……</td></tr>",
noDataList = "<td colspan=\"3\">暂无数据……</td></tr>";
listBox = document.getElementById("list");
nameInput = document.getElementById("name");
addBtn = document.getElementById("add");
addTest = document.getElementById("addTest");
nameInput.addEventListener("input", function(e) {
nameInput.addEventListener("keyup", function(e) {
var ev = e || window.event;
addBtn.addEventListener("click", function(e) {
listBox.addEventListener("click", function(e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
var id = target.getAttribute("data-id");
if (target.className === "deleteBtn") {
} else if (target.className === "updateBtn") {
var name = target.getAttribute("data-name");
addTest.addEventListener("click", function(e) {
for (var i = 1; i < 11; i++) {
var testVal = "test" + i;
window.onload = loaded();
function creatDatabase() {
db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS LIST (id integer primary key AutoIncrement,name)")
db.transaction(function(tx) {
tx.executeSql('INSERT INTO LIST (name) VALUES (?)', [val], function() {
nameInput.value = name = "";
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM LIST", [], function(transaction, result) {
if (result.rows.length > 0) {
for (var i = 0; i < result.rows.length; i++) {
"name": result.rows[i].name
function deleteList(val) {
db.transaction(function(tx) {
tx.executeSql("DELETE FROM LIST WHERE ID = ?", [val], function() {
console.log("Delete success");
function updateList(val, valName) {
valName = window.prompt("请输入名字", valName)
if (valName !== "" && valName !== null) {
db.transaction(function(tx) {
tx.executeSql("UPDATE LIST SET name = ? WHERE ID = ?", [valName, val], function() {
console.log("update success");
} else if (valName !== null) {
window.alert("请输入要修改的名字")
listBox.innerHTML = defaultList + loadingList;
addTest.style.display = "none";
for (var i = 0; i < list.length; i++) {
dom.push("<tr class=\"item\" id=\"item" + list[i].id + "\"><td>" + list[i].id + "</td><td>" + list[i].name + "</td><td><button class=\"deleteBtn\" style=\"width:50px;height20px\" data-id=\"" + list[i].id + "\">删除</button><button class=\"updateBtn\" style=\"width:50px;height20px\" data-name=\"" + list[i].name + "\" data-id=\"" + list[i].id + "\">修改</button></td></tr>");
listBox.innerHTML = defaultList + dom.join("");
listBox.innerHTML = defaultList + noDataList;
addTest.style.display = "inline-block";