DOM表格操作

注意：就算代码中不包含<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>