<!DOCTYPE HTML>
<html>
<head>
<title>动态操作表格</title>
<meta charset="utf-8" />
<style>
table{width:500px; border-collapse:collapse;
text-align:center;
}
th,td{border:1px solid #ccc}
</style>
<script>
var data=[
{"id":1001,"name":'可口可乐',"price":2.5,"count":3000},
{"id":1003,"name":'百事可乐',"price":2.5,"count":5000},
{"id":1011,"name":'非常可乐',"price":2.3,"count":1000}
];
window.onload = function(){
var tbody = document.querySelector("#data table tbody");
//遍历data数组中的每个商品对象
for(var i=0; i<data.length;i++){
//毎遍历一个对象，就追加一个新行tr
// insertRow()
var tr = tbody.insertRow();
//遍历当前对象中的每个属性
for(var key in data[i]){
//毎遍历一个，就在tr中新增一个td
var td = tr.insertCell();
//将td的内容设置为当前对象的当前属性的值
//如果当前属性名为""price"
//则前加“¥”，在toFixed(2)
td.innerHTML = key=="price"?"¥"+data[i][key].toFixed(2):
data[i][key];
}
//遍历完当前对象所有属性后，添加删除按钮列
//step1:向tr中追加新td
var td = tr.insertCell(4);
//step2:创建buuton元素对象btn
var btn = document.createElement("button");
//step3:修改btn的内容为“删除”
btn.innerHTML="删除";
//step4：设置btn的oncilck为“删除函数对象”
btn.onclick = function(){
var tr = this.parentNode//td
.parentNode;//tr
// step1:获得正在删除的名称，pname
// (获得tr中下标为1的格中的内容）
var pname = tr.cells[1].innerHTML;
//step2:弹出确认框：“是否继续删除“+pname+”吗？”
//如果用户选择确认，才删除当行
if(confirm("是否继续删除"+pname+"吗？")){
tr.parentNode.removeChild(tr);
}
};
//自动调用btn.onclick(）；this-->当前btn
//stpe5:在tr下追加btn
td.appendChild(btn);
}
}
</script>
</head>
<body>
<div id="data">
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
</body>
</html>
