JavaScript点击事件实现增加一行表格

最新推荐文章于 2024-09-05 19:28:43 发布

酷爱码

最新推荐文章于 2024-09-05 19:28:43 发布

阅读量4.9k

点赞数 4

分类专栏： JavaScript小作业

本文链接：https://blog.csdn.net/huayula/article/details/111876523

版权

JavaScript小作业专栏收录该内容

29 篇文章 5 订阅

订阅专栏

题目

操作表格，每点击一次添加，就在表格中生成一行

代码如下

<body>
<table border="1" cellpadding="">
    <thead>
    <tr>
        <td>用户名</td>
        <td>密码</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="1">
    <tr>
        <td><input type="text" name="user"></td>
        <td><input type="password" name="pwd"></td>
        <td><button>确定</button></td>
    </tr>
    <tr>
        <td><input type="text" name="user"></td>
        <td><input type="password" name="pwd"></td>
        <td><button>确定</button></td>
    </tr>
    <tr></tr>
    </tbody>
</table>
<button onclick="add()">添加</button>
</body>
<script>
    var i=1;
    function add() {
   var add=document.querySelector("tbody[id='1']")

        add.innerHTML += '<tr><td><input type="text" name="user"></td>\n' +
            '        <td><input type="password" name="pwd"></td>\n' +
            '        <td><button>确定</button></td></tr>'

    }
</script>