使用按钮添加/删除表行

Question

我想在表格中使用2个按钮来添加或删除行。 我找到了适合我需要的解决方案，很遗憾，我无法使用删除功能。

有人可以告诉我我在哪里犯错吗？ 我发现永远都不会达到if(null != chkbox && true == chkbox.checked)循环。

我使用了以下解决方案： https : //viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

multiCapture.php

<form action="#">
                    <input type="button" value="Add Row" onclick="addRow('myTable')" />
                    <input type="button" value="Delete Row" onclick="deleteRow('myTable')" />
                    <p id="test">Test</p>
                    <div class="table-wrapper">
                        <div class="table-scroll">
                            <table id="myTable" border=1>
                                <tr>
                                    <th></th>
                                    <th>Geschlecht</th>
                                    <th>Anrede</th>
                                    <th>Vorname</th>
                                    <th>Nachname</th>
                                    <th>Titel</th>
                                    <th>E-Mail</th>
                                    <th>Sendedatum</th>
<!--                                    <th>Edit</th>-->
                                </tr>
                                <tr>
                                    <td>
                                        <p>
                                            <label>
                                                <input type="checkbox" name="chk"/>
                                                <span></span>
                                            </label>
                                        </p>
                                    </td>
                                    <td>
                                        <div class="input-field">
                                            <div>
                                                <label for="selectOption1">Geschlecht angeben:</label>
                                                <select class="browser-default" id="selectOption1" required>
                                                    <option value="Bitte auswählen" selected>Bitte auswählen</option>
                                                    <option value="Männlich">Männlich</option>
                                                    <option value="Weiblich">Weiblich</option>
                                                </select>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-field">
                                            <div>
                                                <label for="selectOption2">Anrede angeben:</label>
                                                <select class="browser-default" id="selectOption2" required>
                                                    <option value="Bitte auswählen" selected>Bitte auswählen</option>
                                                    <option value="Sehr geehrter">Sehr geehrter</option>
                                                    <option value="Sehr geehrte">Sehr geehrte</option>
                                                    <option value="Lieber">Lieber</option>
                                                    <option value="Liebe">Liebe</option>
                                                    <option value="Werter">Werter</option>
                                                    <option value="Werte">Werte</option>
                                                    <option value="Hallo">Hallo</option>
                                                </select>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <input id="vorname" type="text" class="validate">
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <input id="nachname" type="text" class="validate">
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <input id="titel" type="text">
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <input id="vorname" type="text" class="validate">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="datepicker">
                                    </td>
<!--                                    <td>-->
<!--                                        <input type='button' class='AddNew' value='+'>-->
<!--                                    </td>-->
                                </tr>
                            </table>
                        </div>
                    </div>
                </form>


<script type="application/x-javascript">

    $('#selectOption1').on('change', setAnrede);

    function setAnrede() {
        if ($(this).val() === 'Männlich') {
            $('.input-field option[value="Sehr geehrte"]').hide();
            $('.input-field option[value="Liebe"]').hide();
            $('.input-field option[value="Werte"]').hide();

            $('.input-field option[value="Sehr geehrter"]').show();
            $('.input-field option[value="Lieber"]').show();
            $('.input-field option[value="Werter"]').show();

        }

        if ($(this).val() === 'Weiblich') {
            $('.input-field option[value="Sehr geehrter"]').hide();
            $('.input-field option[value="Lieber"]').hide();
            $('.input-field option[value="Werter"]').hide();

            $('.input-field option[value="Sehr geehrte"]').show();
            $('.input-field option[value="Liebe"]').show();
            $('.input-field option[value="Werte"]').show();

        }
    }

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[1].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[1].type) {
                case "checkbox":
                    newcell.childNodes[1].checked = false;
                    break;
            }
        }
    }

    function deleteRow(tableID) {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[1].childNodes[1];
                document.getElementById('test').innerHTML = "before if loop";
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
        }catch(e) {
            alert(e);
        }
    }
</script>

Answer 1

如果要删除所有选中的行，请尝试以下操作

function deleteRow(tableID) {
    var allChekced = document.querySelectorAll('tr td input[type=checkbox]:checked');
    allChekced.forEach(function(el){
      el.closest('tr').remove();
    })
}

 $('#selectOption1').on('change', setAnrede); function setAnrede() { if ($(this).val() === 'Männlich') { $('.input-field option[value="Sehr geehrte"]').hide(); $('.input-field option[value="Liebe"]').hide(); $('.input-field option[value="Werte"]').hide(); $('.input-field option[value="Sehr geehrter"]').show(); $('.input-field option[value="Lieber"]').show(); $('.input-field option[value="Werter"]').show(); } if ($(this).val() === 'Weiblich') { $('.input-field option[value="Sehr geehrter"]').hide(); $('.input-field option[value="Lieber"]').hide(); $('.input-field option[value="Werter"]').hide(); $('.input-field option[value="Sehr geehrte"]').show(); $('.input-field option[value="Liebe"]').show(); $('.input-field option[value="Werte"]').show(); } } function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[1].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[1].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[1].type) { case "checkbox": newcell.childNodes[1].checked = false; break; } } } function deleteRow(tableID) { var allChekced = document.querySelectorAll('tr td input[type=checkbox]:checked'); allChekced.forEach(function(el){ el.closest('tr').remove(); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#"> <input type="button" value="Add Row" onclick="addRow('myTable')" /> <input type="button" value="Delete Row" onclick="deleteRow('myTable')" /> <p id="test">Test</p> <div class="table-wrapper"> <div class="table-scroll"> <table id="myTable" border=1> <tr> <th></th> <th>Geschlecht</th> <th>Anrede</th> <th>Vorname</th> <th>Nachname</th> <th>Titel</th> <th>E-Mail</th> <th>Sendedatum</th> <!--<th>Edit</th>--> </tr> <tr> <td> <p> <label> <input type="checkbox" name="chk"/> <span></span> </label> </p> </td> <td> <div class="input-field"> <div> <label for="selectOption1">Geschlecht angeben:</label> <select class="browser-default" id="selectOption1" required> <option value="Bitte auswählen" selected>Bitte auswählen</option> <option value="Männlich">Männlich</option> <option value="Weiblich">Weiblich</option> </select> </div> </div> </td> <td> <div class="input-field"> <div> <label for="selectOption2">Anrede angeben:</label> <select class="browser-default" id="selectOption2" required> <option value="Bitte auswählen" selected>Bitte auswählen</option> <option value="Sehr geehrter">Sehr geehrter</option> <option value="Sehr geehrte">Sehr geehrte</option> <option value="Lieber">Lieber</option> <option value="Liebe">Liebe</option> <option value="Werter">Werter</option> <option value="Werte">Werte</option> <option value="Hallo">Hallo</option> </select> </div> </div> </td> <td> <div> <input id="vorname" type="text" class="validate"> </div> </td> <td> <div> <input id="nachname" type="text" class="validate"> </div> </td> <td> <div> <input id="titel" type="text"> </div> </td> <td> <div> <input id="vorname" type="text" class="validate"> </div> </td> <td> <input type="text" class="datepicker"> </td> <!-- <td>--> <!-- <input type='button' class='AddNew' value='+'>--> <!-- </td>--> </tr> </table> </div> </div> </form> 

Answer 2

问题是您的变量chkbox未定义。 使用var chkbox = row.cells[0].querySelector('input[name=chk]'); 而不是var chkbox = row.cells[1].childNodes[1]; 会成功的 ;）

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[1].cells.length; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[1].cells[i].innerHTML; //alert(newcell.childNodes); switch (newcell.childNodes[1].type) { case "checkbox": newcell.childNodes[1].checked = false; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].querySelector('input[name=chk]'); document.getElementById('test').innerHTML = "before if loop"; if (chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } $('#selectOption1').on('change', setAnrede); function setAnrede() { if ($(this).val() === 'Männlich') { $('.input-field option[value="Sehr geehrte"]').hide(); $('.input-field option[value="Liebe"]').hide(); $('.input-field option[value="Werte"]').hide(); $('.input-field option[value="Sehr geehrter"]').show(); $('.input-field option[value="Lieber"]').show(); $('.input-field option[value="Werter"]').show(); } if ($(this).val() === 'Weiblich') { $('.input-field option[value="Sehr geehrter"]').hide(); $('.input-field option[value="Lieber"]').hide(); $('.input-field option[value="Werter"]').hide(); $('.input-field option[value="Sehr geehrte"]').show(); $('.input-field option[value="Liebe"]').show(); $('.input-field option[value="Werte"]').show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#"> <input type="button" value="Add Row" onClick="addRow('myTable')" /> <input type="button" value="Delete Row" onClick="deleteRow('myTable')" /> <p id="test">Test</p> <div class="table-wrapper"> <div class="table-scroll"> <table id="myTable" border=1> <tr> <th></th> <th>Geschlecht</th> <th>Anrede</th> <th>Vorname</th> <th>Nachname</th> <th>Titel</th> <th>E-Mail</th> <th>Sendedatum</th> <!-- <th>Edit</th>--> </tr> <tr> <td> <p> <label> <input type="checkbox" name="chk"/> <span></span> </label> </p> </td> <td> <div class="input-field"> <div> <label for="selectOption1">Geschlecht angeben:</label> <select class="browser-default" id="selectOption1" required> <option value="Bitte auswählen" selected>Bitte auswählen</option> <option value="Männlich">Männlich</option> <option value="Weiblich">Weiblich</option> </select> </div> </div> </td> <td> <div class="input-field"> <div> <label for="selectOption2">Anrede angeben:</label> <select class="browser-default" id="selectOption2" required> <option value="Bitte auswählen" selected>Bitte auswählen</option> <option value="Sehr geehrter">Sehr geehrter</option> <option value="Sehr geehrte">Sehr geehrte</option> <option value="Lieber">Lieber</option> <option value="Liebe">Liebe</option> <option value="Werter">Werter</option> <option value="Werte">Werte</option> <option value="Hallo">Hallo</option> </select> </div> </div> </td> <td> <div> <input id="vorname" type="text" class="validate"> </div> </td> <td> <div> <input id="nachname" type="text" class="validate"> </div> </td> <td> <div> <input id="titel" type="text"> </div> </td> <td> <div> <input id="vorname" type="text" class="validate"> </div> </td> <td> <input type="text" class="datepicker"> </td> <!-- <td>--> <!-- <input type='button' class='AddNew' value='+'>--> <!-- </td>--> </tr> </table> </div> </div> </form>