如何在html表中单独寻址行？

问题描述 投票：0回答：1

我在这里有一张小桌子，我可以先从下拉列表中选择性别。然后，此选择限制第二个下拉列表的选择。

现在问题是，如果我在第一个条目选择“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>
javascript html-table dropdown
1个回答
1
投票

正如我在评论中已经说过的那样，动态生成的行不会对性别的变化做出反应，因为click事件没有绑定。通过改变$('#selectOption1').on('change', setAnrede);into可以避免这种情况

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

这会将事件绑定到表中，但只有当change事件与类.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);
   })
 }

只要更改genderSelect，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);
   });
 }

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

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

我创造了一个工作小提琴。但我使用jquery的.clone（）函数将html减少到所需的最小值，并实现了一个简单的addRow按钮。这只是在那里，看看它是否仍在处理新行。 .clone（）还复制了元素的id，当它们存在时。所以克隆不应该做，如果需要id ...这里是链接：http://jsfiddle.net/sbtywfjL/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.