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>

巴特西

DOM表格操作

最新文章

热门文章