动态创建table,并可以根据条件进行适当行的删除

在使用DOM动态生成table的时候我通常的写法如下:

    //获得tbody节点,在DOM解析时,默认会有这个节点。 

    var tbody = document.getElementById("table_name").firstChild;

    var tr = document.createElement("tr");

    var td = document.createElement("td");

    td.appendChild(document.createTextNode("td中的内容"));

    tr.appendChild(td);

    tbody.appendChild(tr);

    类似上面的写法如果没有成批的删除行的话,是可以应用的,但是如果要指定多行进行删除时就不那么好用了,在网上游览了一天,总结出了一个可以自由指定行删除的方法!

    下面的就是例子

   

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <script type="text/javascript">
        var tbs;        
        function init(){//加载页面时得到tbody对象
            tbs = document.getElementById("tb");   
        }

        var s = new Array();//保存要删除的行对象
        function create(){//这个函数是添加行,同时也是要删除的行
            for(var i=0;i<3;i++){
                var tr = tbs.insertRow(-1);
                s.push(tr);//添加行对象
                var td = tr.insertCell(-1);
                td.appendChild(document.createTextNode("aa"+i));
                //tbs.appendChild(tr);
            }
        }
        function del(){//删除指定行
            for(var i =0;i<s.length;i++){
                tbs.parentNode.deleteRow(s[s.length-i-1].rowIndex);//注意s[s.length-i-1]写法,是倒着计算的
            }
            s.length = 0;
        }
        function again(){//添加正常的行内容
            for(var i=0;i<3;i++){
                var tr = tbs.insertRow(-1);
                var td = tr.insertCell(-1);
                td.appendChild(document.createTextNode("bb"+i));
                //tbs.appendChild(tr);
            }
        }
    </script>
</head>
<body onload="init()">
<table id="aa">
    <tr>
        <td>123123</td>
    </tr>
    <tr>
        <td>123123</td>
    </tr>
    <tr>
        <td>123123</td>
    </tr>
    <tbody id="tb"></tbody>
</table>
<input type="button" onclick="del()" value="del">//删除指定行
<input type="button" onclick="again()" value="again">//添加正常行
<input type="button" onclick="create()" value="create">//创建要删除的行
</body>
</html>

 

注意了:我的tbody是定义在页面中的,如果使用创建tbody节点的方法insertRow()将会返回null

你可能感兴趣的:(JavaScript,html)