当前位置：文江博客话题详情

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

发布于 2024-11-09 05:13:50 字数 121 浏览 2 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃酥萝莉 2024-11-16 05:13:50

删除元素最好使用 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;
            }
        }
    }
}

Removing an element is best done with DOM node functions like removeChild, rather than innerHTML-hacking. eg.:

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

回复收藏 0 原文

拥抱没勇气 2024-11-16 05:13:50

下面是一个关于如何完成此操作的小模型：

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

Here's a small mockup on how this could be done:

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

Key in this is a JScript-function which then can be used from any row in there. It might even be more generalized. When clicking on the checkboxes the function is called.

I'd rather not use innerHTML on this, I'd prefer DOM nodes (here parentElement).

回复收藏 0 原文

盗琴音 2024-11-16 05:13:50

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

Here is a function that performs the required action of deleting rows by checking the value of checkbox. Call this function in the onclick event of the delete button(Comments included). Hope this helps :)

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");
    }
}

回复收藏 0 原文

~没有更多了~