JQuery在兄弟行中查找数据

Question

我有一个包含父/子行关系的表。

当表格打开时，您只会看到父（总计）行。

隐藏详细信息/子行

所以，我想要发生的是删除＆＃34;隐藏＆＃34;单击子行中的类（对于相同的ID）。

//Row click events
$('#table1').on('click','tbody tr', function (event) {
    var td = $('td', this);
    //Get the value in the second column
    var id = $(td[1]).text();

    //This doesn't work, but I need something like this
    $(this).closest('tr').siblings('tr').find(id).removeClass('hide');
}

我试图找出如何编写脚本来检查兄弟行的相同ID（如点击的行），并删除那些行上的类。

Answer 1

你的语法错了。 .之后没有closest。您可能需要以这种方式使用.contain()：

$(this).closest("table").find("tr td:contains(" + id + ")").removeClass("hide");

Answer 2

$(this).closest("table").find('td:contains('+id+')').closest('tr').removeClass("hide");

Answer 3

为每个tr元素提供类名称，此代码段可以为您提供帮助。

$(document).ready(function() {

  $(".child").hide(); //intially children are hidden

  $(".parent").click(function() {

    $(this).nextAll().each(function(i, o) {

      if ($(o).hasClass("child"))
        $(o).toggle();
      else
        return false;
    });

  });

});

.parent {
  background-color: blue;
  color: white;
}
.child {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">

  <tr>
    <th>one</th>
    <th>two</th>
    <th>three</th>
    <th>four</th>
  </tr>

  <tr class="parent">
    <td>parent</td>
    <td>parent</td>
    <td>parent</td>
    <td>parent</td>
  </tr>

  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>
  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>
  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>

  <tr class="parent">
    <td>parent</td>
    <td>parent</td>
    <td>parent</td>
    <td>parent</td>
  </tr>

  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>
  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>
  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>

  <tr class="parent">
    <td>parent</td>
    <td>parent</td>
    <td>parent</td>
    <td>parent</td>
  </tr>

  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>
  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>
  <tr class="child">
    <td>child</td>
    <td>child</td>
    <td>child</td>
    <td>child</td>
  </tr>

</table>

与parent或