javascript动态添加和删除表格

在web端开发时，动态添加和删除表格是很常见的，这里简单给出一点代码以供参考：

.. code:: html

代码语言：javascript复制

<script type="text/javascript">
    var rowIndex = 0;
    function addOneLineOnClick() {
        var row=userList.insertRow(userList.rows.length);
        var col = row.insertCell(0);
        col.innerHTML = "<input align=center type="text" name="username" id="username">";
        col = row.insertCell(1);
        col.innerHTML = "<input type="text" name="usersex" id="usersex">";
        col = row.insertCell(2);
        col.innerHTML = "<input type="text" name="userage" id="userage">";
        col = row.insertCell(3);
        col.innerHTML = "<input type='button' value='删除' id=btnDeleteLine name=btnDeleteLine onclick='return DeleteRow("row"  rowIndex  "")'>";
        row.setAttribute("id", "row"   rowIndex);
        rowIndex  ;
    }

    function DeleteRow(rowTag){
        var i = userList.rows(rowTag).rowIndex;
        userList.deleteRow(i);
        rowIndex--;
    }
</script>

<table width="95%" border="1" cellpadding="0" cellspacing="0" name="userList" id="userList" align="center">
    <tr>
        <td nowrap>
            <div align="center">
            姓名
            </div>
        </td>
        <td nowrap>
            <div align="center">
            性别
            </div>
        </td>
        <td nowrap>
            <div align="center">
            年龄
            </div>
        </td>
        <td nowrap>
            <div align="center">
            删除
            </div>
        </td>
    </tr>
</table>
<p align="center">
<input name="btnAddLine" type="button" id="btnAddLine"
onClick="return addOneLineOnClick()" value="加入一行">
</p>

html code web 表格

0 人点赞