Динамически удалить строку таблицы, используя флажок и JavaScript - PullRequest
Новая
       23

Динамически удалить строку таблицы, используя флажок и JavaScript

3 голосов
/ 21 мая 2011

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

Ответы [ 3 ]

4 голосов
/ 21 мая 2011

Удаление элемента лучше всего выполнять с помощью функций узла DOM, таких как removeChild, а не innerHTML -хакерство.напр .::1003* 

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 голосов
/ 14 августа 2016

Вот функция, которая выполняет требуемое действие по удалению строк путем проверки значения флажка. Вызовите эту функцию в событии 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");
    }
}
2 голосов
/ 21 мая 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...