摘要：<!DOCTYPE HTML><html><head><title>動(dòng)態(tài)操作表格</title><meta charset="utf-8" /><style> table{width:500px; border-collapse:collapse; text-align:center; } t
<!DOCTYPE HTML>
<html>
<head>
<title>動(dòng)態(tài)操作表格</title>
<meta charset="utf-8" />
<style>
table{width:500px; border-collapse:collapse;
text-align:center;
}
td{border:1px solid #ccc}
thead td{font-weight:bold;}
</style>
<script>
var data=[
{"id":1001,"name":'可口可樂',"price":2.5,"count":3000},
{"id":1003,"name":'百事可樂',"price":2.5,"count":5000},
{"id":1011,"name":'非?？蓸?#39;,"price":2.3,"count":1000}
];
</script>
</head>
<body>
<div id="data"></div>
<script>
//創(chuàng)建table
var table=document.createElement("table");
table.createTHead();//為table添加thead
//為thead添加tr
var tr=table.tHead.insertRow();
//遍歷data中第一個(gè)商品的每個(gè)屬性
for(var key in data[0]){
//為tr添加一個(gè)td,并設(shè)置td的內(nèi)容為當(dāng)前屬性名
tr.insertCell().innerHTML=key;
}//(遍歷結(jié)束)
//為tr添加一個(gè)td，內(nèi)容為operate
tr.insertCell().innerHTML="operate";
//為table添加tbody
var tbody=table.createTBody();
//遍歷data中每個(gè)商品
for(var i=0;i<data.length;i++){
var tr=tbody.insertRow();//為tbody添加tr
//遍歷data中當(dāng)前商品的每個(gè)屬性
for(var key in data[i]){
//為tr添加td，并設(shè)置td的內(nèi)容為當(dāng)前屬性值
tr.insertCell().innerHTML=data[i][key];
}//(遍歷結(jié)束)
var td=tr.insertCell();//為tr添加一個(gè)td
//在td中添加一個(gè)button
var btn=document.createElement("button");
//設(shè)置button的內(nèi)容為delete
btn.innerHTML="delete";
//為btn添加單擊事件:
btn.onclick=function(){//this->btn
var tr=this.parentNode.parentNode;
var pname=tr.cells[1].innerHTML;
if(confirm("go on deleting "+pname+"?")){
table.deleteRow(tr.rowIndex);
}
}
td.appendChild(btn);//將btn添加到td中
}//(遍歷結(jié)束)
//將table添加到id為data的div中
document.getElementById("data")
.appendChild(table);
</script>
</body>
</html>
批改老師：查無此人批改時(shí)間：2019-07-08 09:19:32
老師總結(jié)：完成的不錯(cuò)。json數(shù)據(jù)，后面由php來給。繼續(xù)加油。