使用复选框和javascript动态删除表格行答案

【问题标题】：Dynamicaly delet the table row using check box and javascript使用复选框和javascript动态删除表格行
【发布时间】：2011-08-30 04:47:20
【问题描述】：

我们如何使用 javascript 动态删除 html 表格行。我们在每一行都有一个复选框。在选中复选框的情况下单击删除按钮时，该行将被删除。如 document.getElementById(j).innerHTML = '';

【问题讨论】：

标签： javascript html delete-row

【解决方案1】：

最好使用removeChild 等DOM 节点函数来删除元素，而不是innerHTML-hacking。例如：

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

【讨论】：

【解决方案3】：

这是一个通过检查复选框的值来执行删除行所需操作的函数。在删除按钮的 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");
    }
}

【讨论】：