使用按钮添加/删除表行

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>