javascript - 如何使用 jquery 从动态添加的表中删除没有 id 的特定 <td> 单元格？

Question

该表格包含一个下拉框和一个普通的<td>有一个值。当onChange下拉菜单中，具体<td>必须更改为另一个下拉菜单。我使用 jQuery 来实现该函数，但是当我更改第一行的下拉列表时，整个表都会发生更改。我只需要对 onChange 所在的单行进行更改。函数已被调用。

$('td:nth-child(11),th:nth-child(11)').hide();
$('td:nth-child(10),th:nth-child(10)').show();

用于隐藏和显示第10列和第11列。

doc.ready函数():

$(document).ready(function() {
  $('td:nth-child(11),th:nth-child(11)').show();
  $('td:nth-child(10),th:nth-child(10)').hide();
  // ...

使用的onChange函数:

$(document).on('change','.mySelect', function(event) {
  event.preventDefault();

  $('td:nth-child(11),th:nth-child(11)').hide();
  $('td:nth-child(10),th:nth-child(10)').show();
  //$(this).closest("td").show();

  var _this = $(this);
  var id =_this.val();
  var statusValue = id;

  $.get('AssignedTo', { statusVal : statusValue }, function(response) {
    var select = _this.closest("tr").find("select[name='assigned']");
    /* var select = $('#assigned'); */
    select.find('option').remove();

    $.each(response, function(index, value) {
      $('<option>').val(value).text(value).appendTo(select);
    });
  });
});

Answer 1

而不是使用nth-child ，考虑使用eq() - 它更干净，并且不存在 nth-child 的一些特异性问题.

• 获取所有<td>在“changed”行中的元素，可以获得父<td>通过这样做.closest("td")并使用 .siblings("td") 选择其所有 sibling

• 要包含原始的(而不仅仅是 sibling )，您可以使用 .addBack() 。

• 最后，既然我们已经拥有了该行中的所有单元格，请使用 eq() 选择您想要的单元格。 .

把所有的放在一起，看起来像这样:

//Select the 11th cell in the row
var $cell = $(this).closest('td').siblings('td').addBack().eq(10);

或者，您可以使用.closest("tr")获取父级并选择其所有子级(而不是 sibling )和children() :

//Select the 11th cell in the row
var $cell = $(this).closest("tr").children("td").eq(10);