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

最新推荐文章于 2024-11-02 12:42:04 发布

vic78

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量988

点赞数

分类专栏： Javascript 文章标签： javascript function html delete input table

本文链接：https://blog.csdn.net/vic78/article/details/247281

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

    function addRow() {
        var cell0_html = '<a href=# οnclick=/"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" οnclick="addRow()">

</body>
</html>