Динамически удаляйте строку таблицы с помощью флажка и javascript

Как мы можем динамически удалять строки таблицы html с помощью javascript. У нас есть флажок в каждой строке. При нажатии кнопки удаления с установленным флажком строка будет удалена. Например, document.getElementById (j) .innerHTML = '';


javascript html delete-row
person Varada    schedule 21.05.2011    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Удаление элемента лучше всего выполнять с помощью функций узла DOM, таких как removeChild, а не 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;
            }
        }
    }
}
person bobince    schedule 21.05.2011

arrow_upward
2
arrow_downward

Вот небольшой макет того, как это можно сделать:

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

person Bjoern    schedule 21.05.2011

arrow_upward
2
arrow_downward

Вот функция, которая выполняет необходимое действие по удалению строк, проверяя значение флажка. Вызовите эту функцию в событии 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");
    }
}
person Bestin John    schedule 14.08.2016