Dynamicaly delet the table row using check box and javascript_问答_开发者

Dynamicaly delet the table row using check box and javascript

开发者 https://www.devze.com 2023-03-07 17:10 出处：网络

How can we Dynamically delete the html table rows using javascript. We have a check box on each row. While clicking the remove button with the check box selected the row would be deleted. Such as

How can we Dynamically delete the html table rows using javascript. We have a check box on each row. While clicking the remove button with the check box selected the row would be deleted. Such as docu开发者_开发百科ment.getElementById(j).innerHTML = '';

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

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).

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