javascript - 如何单独寻址 html 表格中的行？

Question

我这里有我的小 table ，我可以首先从下拉列表中选择性别。然后，该选择限制了第二个下拉列表的选择。

现在的问题是，如果我在第一个条目中选择“Männlich”并在按钮上添加第二行，那么我在第二个下拉列表中会根据我选择“Männlich”的第一行进行限制.

如何单独选择每行？谁能帮我吗？

$('#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[0].querySelector('input[name=chk]');
      if (chkbox && true == chkbox.checked) {
        if (rowCount <= 2) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <input type="button" value="Empfänger hinzufügen" onclick="addRow('myTable')" />
  <input type="button" value="Empfänger löschen" onclick="deleteRow('myTable')" />
  <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 validate">-->
          <!--                                    </td>-->
          <!--                                    <td>-->
          <!--                                        <input type='button' class='AddNew' value='+'>-->
          <!--                                    </td>-->
        </tr>
      </table>
    </div>
  </div>
</form>

Answer 1

正如我在评论中已经说过的，您的动态生成的行不会对性别的变化使用react，因为点击事件没有绑定(bind)。通过更改 $('#selectOption1').on('change', setAnrede); 可以避免这种情况进入

$('table').on('change', '.genderSelect', setAnrede); 

这会将事件绑定(bind)到表，但仅当更改事件与类 .genderSelect 的后代元素匹配时才会触发(您现在将其添加到选择框中；))

首先，我更喜欢仅在选择性别时设置选项，而不是显示/隐藏不需要的值。另外，我喜欢只在我的代码中指定我的选择框的选项。主要是为了避免if由于拼写错误而导致的陈述或错误。因此，在脚本的开头，我创建一个对象，用它来填充两个选择框的选项!

 var gsAddress = {
   "neutral": ["Guden", "Hallo", "Moin"],
   "male": ["Sehr geehrter", "Werter", "Lieber"],
   "female": ["Sehr geehrte", "Werte", "Liebe"]
 };

正如我所说，我想使用上述对象来填充两个选择框的选项。

第一个选择框(genderSelect)需要一个新函数，该函数在文档就绪函数中调用:

$(".genderSelect").each(prefillGenderSelect); //don't forget to add the class to the select element

function prefillGenderSelect() {
   var curSelBox = this; //assign the current context to a variable
   $.each(gsAddress, function(key, value) { // loop through the object, created above
     var newOption = $('<option/>', {
       'value': key, // the current gender where you're cycling through
       'class': 'anyClass', // add any needed classes for <option>
       'text': key // same again as value (but can be different)
     }).appendTo(curSelBox);
   })
 }

一旦您更改性别选择，setAnrede 就会触发并使用其选项填充 gsAddress 选择框。我的 setAnrede 函数，如下所示:

function setAnrede() {
   var myRow = $(this).closest("tr"); // travel up your DOM
   var curSelectBox = myRow.find(".gsAddress"); //travel down your DOM and find your select Box
   $(curSelectBox).find("option").remove(); //wipe out all existing options

   $.each(gsAddress[$(this).val()], function(index, value) { //gs for gender specific

     var newOption = $('<option/>', {
       'value': value, // the current gsAdress where you're cycling through
       'class': 'anyClass', // add any needed classes for <option>
       'text': value // same again as value(but can be different)
     }).appendTo(curSelectBox);
   });
 }

用于“添加行”按钮。您应该将默认行定义为对象并将其附加到表中，而不是复制第一行。这看起来类似于之前创建的“选项”对象

var defaultRow = $("<tr/>"); //if there are attributes like class and id needed, add them like in the option declaration.

var exampleCell = $("<td/>", {    //every cell needs to be defined, ofc
  'class' : 'aTableCell'         //if you need to add class information to the td
  }
$(defaultRow).append(exampleCell); //and if it is created, append it into your row
$("#myTable").append(defaultRow); // in the end, just append the complete row to your table

我已经创建了一个工作 fiddle 。但我将 html 减少到所需的最低限度，并使用 jquery 的 .clone() 函数实现了一个简单的 addRow 按钮。这只是为了看看它是否仍在新行上工作。.clone() 还会复制元素的 id(如果存在)。所以如果需要 id，则不应进行克隆...这是链接:http://jsfiddle.net/sbtywfjL/