首先写出一个自定义表头,DOM规定thead只能有一个,tbody可以有多个,tfoot只能有一个:
<table width="100%" id="table1" border="1px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
下面我们对表格动态创建进行一些基础实现:
var data = [{
id: 1,
username: '小美',
sex: '男'
},
{
id: 2,
username: '蚯蚓',
sex: '男'
},
{
id: 3,
username: '关关',
sex: '男'
},
{
id: 4,
username: '筱筱',
sex: '男'
},
];
var oTable = document.getElementById('table1');
var oTbody = oTable.tBodies[0];
for (var i = 0; i < data.length; i++) {
var oTr = document.createElement('tr');
if (i % 2 == 0) {
oTr.style.background = 'white';
} else {
oTr.style.background = 'gray';
}
var oTd = document.createElement('td');
oTd.innerHTML = data[i].id;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = data[i].username;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = data[i].sex;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
var oHandle = document.createElement('a');
oHandle.innerHTML = '删除';
oHandle.href = 'javascript:;'
oHandle.onclick = function () {
oTbody.removeChild(this.parentNode.parentNode);
for (var i = 0; i < oTbody.rows.length; i++) {
if (i % 2 == 0) {
oTbody.rows[i].style.background = 'white';
} else {
oTbody.rows[i].style.background = 'gray'
}
}
}
oTd.appendChild(oHandle);
oTr.appendChild(oTd);
oTbody.appendChild(oTr);
}
现在我们的表格已经动态创建出来了,并且能够进行数据的删除操作。