标签：
注意：就算代码中不包含<tbody>标签，浏览器解析时也可能会自动添加，因此需要注意子元素的选择
表格操作用到的属性：
1、tHead
2、tBodies
3、tFoot
更为细致的有：
4、rows
5、cells
表格操作：
//从后台获取数据、隔行变色、删除整行
<!DOCTYPE> <html> <head lang="en"> <meta charset="utf-8"> <title>表格操作</title> </head> <body> <table id="tab" border="1px" width="100%"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </body> <script> window.onload=function(){ var data=[ {number:1,name:"leo1",sex:"男",age:17}, {number:2,name:"leo2",sex:"男",age:15}, {number:3,name:"leo3",sex:"男",age:14}, {number:4,name:"leo4",sex:"女",age:18}, ]; var oTbody=document.getElementById("tab").tBodies[0]; for(var i=0;i<data.length;i++){ var oTr=document.createElement("tr"); if(i % 2){ oTr.style.background="#ccc"; } else{ oTr.style.background="#fff"; } var oTd=document.createElement("td"); oTd.innerHTML=data[i].number; oTr.appendChild(oTd); var oTd=document.createElement("td"); oTd.innerHTML=data[i].name; oTr.appendChild(oTd); var oTd=document.createElement("td"); oTd.innerHTML=data[i].sex; oTr.appendChild(oTd); var oTd=document.createElement("td"); oTd.innerHTML=data[i].age; oTr.appendChild(oTd); var oTd=document.createElement("td"); var oA=document.createElement("a"); oA.href="javascript:;"; oA.innerHTML="删除"; oTd.appendChild(oA); oTr.appendChild(oTd); oTbody.appendChild(oTr); } var oA=document.getElementsByTagName("a"); for(var m=0;m<oA.length;m++){ oA[m].onclick=function(){ oTbody.removeChild(this.parentNode.parentNode); for(var i=0;i<document.getElementsByTagName("tr").length;i++){ if(i % 2){ oTr.style.background="#ccc"; } else{ oTr.style.background="#fff"; } } } } } </script> </html>
标签：
原文地址：http://www.cnblogs.com/dll-ft/p/5491167.html
