IndexedDB-增删数据
IndexedDB
IndexedDB
| 编号 | 名称 | 价格 | 删除 |
|---|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IndexedDB</title>
</head>
<body>
<h1>IndexedDB </h1>
<input value="创建库" style="background-color: rgb(111, 111, 235); border: 0px;" type="button" onclick="create()" />
<input type="button" style="background-color: rgb(111, 111, 235); border: 0px;" value="删除表"><br>
<br>
<table border="1" id="tabGoods"cellspacing="0" style="width: 800px; border: 2px solid blue;" >
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>删除</th>
</tr>
</table>
<fieldset style="width: 800px;border: 2px solid blue;">
<legend >商品信息</legend>
<label for="name">名称</label>
<input type="text" name="id" id="id" value="" />
<p>
<label for="name">价格</label>
<input type="text" name="name" id="name" value="" />
</p>
<p>
<input type="button" style="background-color: rgb(111, 111, 235); border: 0px;" id="btnSubmit" value="添加" />
<input type="button" style="background-color: rgb(111, 111, 235); border: 0px;" id="btnUpdate" value="更新" />
</p>
</fieldset>
<h3 id="msg"></h3>
<script src="/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var db;
function init() {
create();
$("body").on("click", "#btnSubmit", {}, function() {
add();
});
$("#tabGoods").on("click", ".del", {}, function() {
if(confirm('确定要删除？')) {
var tr = $(this).closest("tr");
del(tr.data("goods").id, function() {
alert('删除成功！');
tr.remove();
});
}
});
$("#tabGoods").on("click", ".edit", {}, function() {
var tr = $(this).closest("tr");
var obj = tr.data("goods");
$("#id").val(obj.id).prop("disabled", "disabled");
$("#name").val(obj.name);
// $("#price").val(obj.price);
});
$("body").on("click", "#btnUpdate", {}, function() {
var obj = {
"id": $("#id").val(),
"name": $("#name").val(),
};
edit(obj, function() {
alert('修改成功！');
getAll();
});
$("#id").val(obj.id).removeProp("disabled");
});
}
init();
function create() {
var request = indexedDB.open("gomallPro", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.result;
log('创建成功！');
getAll();
};
//失败时
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
};
request.onupgradeneeded = function(e) {
e.target.result.createObjectStore("goods", {
"keyPath": "id"
});
log("初始化数据库成功！");
};
}
//新增数据
function add() {
var tx = db.transaction("goods", "readwrite");
var goods = tx.objectStore("goods");
var item = {
"id": $("#id").val(),
"name": $("#name").val(),
"price": $("#price").val()
};
goods.add(item);
log("添加成功！");
getAll();
}
//更新对象
function edit(item, callback) {
var tx = db.transaction("goods", "readwrite");
var goods = tx.objectStore("goods");
//执行更新
var request = goods.put(item);
request.onsuccess = function(e) {
log(e.target.result);
if(callback) callback();
};
}
//删除对象
function del(key, callback) {
var tx = db.transaction("goods", "readwrite");
var goods = tx.objectStore("goods");
var request = goods.delete(key);
request.onsuccess = function(e) {
log(e.target.result);
log("删除成功！");
if(callback) callback();
};
}
var index;
function getAll() {
index = 1;
$("#tabGoods tr:gt(0)").remove();
var tx = db.transaction("goods", "readwrite");
var goods = tx.objectStore("goods");
var request = goods.openCursor();
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
var obj = cursor.value;
genTr(obj);
cursor.continue();
}
};
}
function genTr(goods) {
var tr = $("<tr/>").data("goods", goods);
$("<td/>").html(index++).appendTo(tr);
$("<td/>").html(goods.id).appendTo(tr);
$("<td/>").html(goods.name).appendTo(tr);
var btnDel = $("<input type='button' value='删除' style='background-color: rgb(111, 111, 235); ' class='del'/>");
var btnEdit = $("<input type='button' value='编辑' style='background-color: rgb(111, 111, 235); ' class='edit'/>");
$("<td/>").append(btnDel).append(btnEdit).appendTo(tr);
tr.appendTo($("#tabGoods"));
}
var msg = document.getElementById("msg");
function log(m) {
msg.innerHTML+=m+"<br/>";
}
</script>
</body>
</html>
