您的位置：首页 > Web前端 > JavaScript

Javascript实现动态增加、删除表格域

2005-01-10 16:13 896 查看

<html>
<head>
<title> Dynamic add or delete rows of a table </TITLE>

<script language = "javascript">

    function getTable() {
        return document.getElementById("testid");
    }

    function addRow() {
        var cell0_html = '<a href=# onclick=/"deleteRow(this)/">delete</a>';
        var cell1_html = '<input type=/"text/">';

        var tbl = getTable();
        var row;
        var cell;

        // add new row after the last row -- TR
        row = tbl.insertRow(tbl.rows.length);

        // create a cell for the new row -- TD
        cell = tbl.rows.item(tbl.rows.length - 1).insertCell(0);
        cell.innerHTML = cell0_html;

        cell = tbl.rows.item(tbl.rows.length - 1).insertCell(1);
        cell.innerHTML = cell1_html;

        var rowIdx = tbl.rows.length -1 ; // first row -- 0
        // store the row index into the related row
     //     row's first cell's first child -- refer to "<a href=#"
        tbl.rows.item(tbl.rows.length-1).cells.item(0).children.item(0).text = rowIdx;
     alert("rowIdx="+rowIdx);
    }

    function deleteRow(x) {
        var tbl = getTable();
     // delete the row by row index
        tbl.deleteRow(x.text.valueOf());
     // refresh the row index
        for (var j = 1; j < tbl.rows.length; j++)
            tbl.rows.item(j).cells.item(0).children.item(0).text=j;
    }

    function refreshIndex() {
        // refresh the row index
        for (var j = 1; j < tbl.rows.length; j++)
            tbl.rows.item(j).cells.item(0).children.item(0).text=j;
    }

</script>
</head>
<body>
<input type="button" value="add" onclick="addRow()">

<table width="100%" id="testid" border=1>
    <tr>
     <td>H-1</td>
     <td>H-2</td>
</tr>
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript function html delete input table

相关文章推荐

新的分享

章节导航