js动态添加删除表格

最新推荐文章于 2024-08-31 16:32:57 发布

VinceJin

最新推荐文章于 2024-08-31 16:32:57 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

文章标签： table input button delete function border

本文链接：https://blog.youkuaiyun.com/aa705123123/article/details/5461188

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>增加Table行</title>
    </head>
    <script>
        function addRow()
        {
        //添加一行
        var table = document.getElementById("testTb1");
        var len = table.rows.length;
        var newTr = testTb1.insertRow();
        //添加两列
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        //设置列内容和属性
        newTd0.innerHTML = '<input type=checkbox id="box'+len+'">';
        newTd1.innerText='第'+(len+1)+'行';


        }

        function del(){
        var table = document.getElementById("testTb1");
        table.deleteRow();
            }

    </script>
    <body>
        <table id="testTb1" border=1>
        </table>
        <br/>
        <input type="button" id="add" onclick="addRow();" value="Add Row" />
        <input type="button" id="delete" onclick="del();" value="Delete Row" />
    </body>
</html>