1. 程式人生 > 其它 >JavaScript點選事件實現增加一行表格

JavaScript點選事件實現增加一行表格

技術標籤:JavaScript小作業

題目

操作表格,每點選一次新增,就在表格中生成一行

程式碼如下

<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>