the5fire

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

.. code:: html

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