the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


javascript动态添加和删除表格

作者:the5fire | 标签:     | 发布:2011-01-02 10:19 p.m. | 阅读量: 3432, 3426

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

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

----EOF-----

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: