logo标签列表

使用复选框和JavaScript动态删除表格行

javascripthtmldelete-row
3

如何使用JavaScript动态删除HTML表格行。 每一行都有一个复选框。在选择复选框并点击删除按钮时，将删除该行。例如： document.getElementById(j).innerHTML = '';

3个回答
4

最好使用DOM节点函数（如removeChild）来删除元素，而不是使用innerHTML技巧。例如：

function removeAllRowsContainingCheckedCheckbox(table) {
    for (var rowi= table.rows.length; rowi-->0;) {
        var row= table.rows[rowi];
        var inputs= row.getElementsByTagName('input');
        for (var inputi= inputs.length; inputi-->0;) {
            var input= inputs[inputi];

            if (input.type==='checkbox' && input.checked) {
                row.parentNode.removeChild(row);
                break;
            }
        }
    }
}
2
这是一个简单的模拟，展示了如何实现这一点：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mockup</title>
<script type="text/javascript">
function killRow(src) {
    var dRow = src.parentElement.parentElement;  
    document.all("table").deleteRow(dRow.rowIndex);  
}
</script>
</head>
<body>

<form action="something.html">
<table id="table">
    <tr>
        <td><input type='checkbox' onclick='killRow(this);'>Click me!</td>
        <td>Demodata 1</td>
    </tr>
    <tr>
        <td><input type='checkbox' onclick='killRow(this);'>Click me!</td>
        <td>Demodata 2</td>
    </tr>
</table>
</form>

</body>
</html>

在此关键是一个JScript函数，可以从其中的任何行中使用。它甚至可能更加通用化。当单击复选框时，将调用该函数。

我宁愿不在此使用innerHTML，而是使用DOM节点（此处为parentElement）。

2
这里有一个函数，可以通过检查复选框的值来执行删除行的操作。在删除按钮的onclick事件中调用此函数（包括注释）。希望这能帮到您 :)
function removeSampleRow(id) {
    /***We get the table object based on given id ***/
    var objTable = document.getElementById(id);

    /*** Get the current row length ***/
    var iRow = objTable.rows.length;

    /*** Initial row counter ***/
    var counter = 0;

    /*** Performing a loop inside the table ***/
    if (objTable.rows.length > 1) {
        for (var i = 0; i < objTable.rows.length; i++) {

             /*** Get checkbox object ***/
            var chk = objTable.rows[i].cells[0].childNodes[0];
            if (chk.checked) {
                /*** if checked we del ***/
                objTable.deleteRow(i);
                iRow--;
                i--;
                counter = counter + 1;
            }
        }

        /*** Alert user if there is now row is selected to be deleted ***/
        if (counter == 0) {
            alert("Please select the row that you want to delete.");
        }
    }else{
        /*** Alert user if there are no rows being added ***/
        alert("There are no rows being added");
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接