javascrip 动态添加行

最新推荐文章于 2019-06-15 18:58:00 发布

OLF2008

最新推荐文章于 2019-06-15 18:58:00 发布

阅读量178

点赞数

分类专栏： js 文章标签： Java

本文链接：https://blog.csdn.net/OLF2008/article/details/83673214

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>增加Table行</title>
    </head>
    <script>
        function addRow(obj)
        {
        //添加一行
        var newTr = testTbl.insertRow();
        //添加两列
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        //设置列内容和属性
        newTd0.innerHTML = '<input type=checkbox id="box4">'; 
        newTd1.innerText= '新加行';
        }
    </script>
    <body>
        <table id="testTbl" border=1>
            <tr id="tr1">
                <td ><input type=checkbox id="box1"></td>
                <td id="b">第一行</td>
            </tr>
            <tr id="tr2">
                <td ><input type=checkbox id="box2"></td>
                <td id="b">第二行</td>
            </tr>
            <tr id="tr3">
                <td ><input type=checkbox id="box3"></td>
                <td>第三行</td>
            </tr>
        </table>        
        <br />
        <input type="button" id="add" onclick="addRow();" value="Add Row" />
    </body>
</html>