一.表格
创建table的方法：
先创建一个table
var table = document.createElement("table");
然后在table中添加thead
var thead = table.createTHead();
在thead中添加行tr
var tr = thead.insertRow();
在tr行中添加列
var td = tr.insertCell();
关于动态表格的增删改的功能
表格的样式
<style type="text/css">
table{
border-collapse:collapse;
width:400px;
height: 100px;
border: 1px black solid;
}
table>thead{
font-weight: bold;
}
table td{
border: 1px black solid;
text-align: center;
}
</style>
js代码部分：
<body>
<div id = "data"></div>
<script type="text/javascript">
var data = [
{"id":10,"name":"AD钙","price":2.0,"count":100},
{"id":20,"name":"农夫山泉","price":2.0,"count":200},
{"id":30,"name":"菠萝啤","price":3.0,"count":300},
{"id":40,"name":"柠檬柚子水","price":6.0,"count":50},
];
//创建table
var table = document.createElement("table");
//在table中添加thead
var thead = table.createTHead();
//在thead中添加tr
var tr = thead.insertRow();
//遍历data数组中的第一个商品的每个属性
for(var key in data[0]){
//在tr中添加td,并设置其内容为当前属性名
tr.insertCell().innerHTML = key;
}
//添加操作这一列
tr.insertCell().innerHTML = "操作";
//在table中添加tbody
var tbody = table.createTBody();
//遍历data数组中每个商品
for(var j=0;j<data.length;j++){
//在tbody中添加tr
var tr = tbody.insertRow();
//遍历data中当前商品的每个属性
for(var key in data[j]){
//在tr中添加td,并设置td的内容为当前商品的当前属性值
tr.insertCell().innerHTML =data[j][key] ;
}
var delebut = document.createElement("button");
delebut.innerHTML = "删除";
var amendbut = document.createElement("button");
amendbut.innerHTML = "修改";
var add = document.createElement("button");
add.innerHTML = "添加";
var td = tr.insertCell();
td.appendChild(delebut);//删除
td.appendChild(amendbut);//修改
td.appendChild(add);//添加
//删除点击事件
delebut.onclick = function(){
var tr = this.parentNode.parentNode;
//console.log(tr);
//人性化提示，询问是否要删除某某数据
if(confirm("是否要删除"+tr.cells[1].innerHTML)){
table.deleteRow(tr.rowIndex);
}
}
//单击修改事件
amendbut.onclick = function(){
var tr = this.parentNode.parentNode;
var i = 0;
if(confirm("是否要修改"+tr.cells[1].innerHTML)){
var r = tr.rowIndex;
for(var key in data[r]){
data[r][key] = prompt("请修改"+key);
tr.cells[i].innerHTML = data[r][key];
i++;
}
}
}
//单击添加事件
add.onclick = function(){
var tr = tbody.insertRow();
if(confirm("是否要添加新内容")){
for(var key in data[0]){
var td = tr.insertCell();
var content = prompt('请输入'+key);
td.innerHTML = content;
}
var delebut = document.createElement("button");
delebut.innerHTML = "删除";
var amendbut = document.createElement("button");
amendbut.innerHTML = "修改";
var add = document.createElement("button");
add.innerHTML = "添加";
var td = tr.insertCell();
td.appendChild(delebut);//删除
td.appendChild(amendbut);//修改
td.appendChild(add);//添加
}
}
}
//将table添加到id为data的元素下
document.getElementById('data').appendChild(table);
</script>
</body>
界面展示：
删除界面：
修改界面：
添加界面：
界面不足的地方：添加的内容没有添加到数组里面，只是把添加的内容添加到了界面,
添加之后的内容无法进行操作