Javascript:DOM表格操作
需求说明：
/* *需求说明: *获取元素：tBodies,tHead,tFoot,rows,cells *表格的创建 *数据添加 *隔行变色 *删除操作，剩余表格重新计算，实现隔行变色 */
HTML:
<table id="table1">
<tbody>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</tbody>
</table>
CSS:
table{
border:1px solid #eee;
border-collapse: collapse;
}
td,th{
border: 1px solid #eee;
padding: 12px 18px;
}
a{
text-decoration: none;
padding: 4px 10px;
color: #f8f8f8;
font-size: 12px;
border-radius: 3px;
letter-spacing: 2px;
text-shadow: 0 0 1px rgba(0,0,0,.15);
background-color: #eb4f38;
}
JAVASCRIPT:
/*
*需求说明:
*获取元素：tBodies,tHead,tFoot,rows,cells
*表格的创建
*数据添加
*隔行变色
*删除操作，剩余表格重新计算，实现隔行变色
*/
/*
=========================
*tHead:表格头
*tBodies:表格正文
*tFoot：表格尾
*rows:行
* cells:列
=========================
*/
var oTable=document.getElementById('table1');
var oTbody=oTable.tBodies[0];
var data=[
{'id':1,'name':'kevin1','sex':'男'},
{'id':2,'name':'kevin2','sex':'男'},
{'id':3,'name':'kevin3','sex':'男'},
{'id':4,'name':'kevin4','sex':'男'},
{'id':5,'name':'kevin5','sex':'男'},
{'id':6,'name':'kevin6','sex':'男'},
];
for(var i=0;i<data.length;i++){
var oTr=document.createElement('tr');
/*添加id*/
var oTd=document.createElement('td');
oTd.innerHTML=data[i].id;
oTr.appendChild(oTd);
/*隔行换色*/
if (i%2===0) {
oTr.style.backgroundColor='#fff';
}else{
oTr.style.backgroundColor='#f8f8f8';
}
/*添加name*/
oTd=document.createElement('td');
oTd.innerHTML=data[i].name;
oTr.appendChild(oTd);
/*添加sex*/
oTd=document.createElement('td');
oTd.innerHTML=data[i].sex;
oTr.appendChild(oTd);
/*添加操作*/
oTd=document.createElement('td');
/*oTd.innerHTML='删除';*/
oTr.appendChild(oTd);
/*删除*/
var oA=document.createElement('a');
oA.innerHTML='删除';
oA.href='javascript:';
oA.onclick=function(){ //删除当前【行】
oTbody.removeChild(this.parentNode.parentNode);
//删除操作完成之后，剩余表格重新计算，实现隔行变色
for(var i=0;i<oTbody.rows.length;i++){
if (i%2===0) {
oTbody.rows[i].style.backgroundColor='#fff';
}else{
oTbody.rows[i].style.backgroundColor='#f8f8f8';
}
}
}
oTd.appendChild(oA);
oTbody.appendChild(oTr);
}
在线演示：
