Question

我有这个表，所有.sales-details行都会被隐藏，但是当你点击.grey行时，我只希望在出现后立即显示.sales-details行，直到下一行.grey行。这对Jquery来说可能吗？

<table width="100%" class="modal-table" id="modal-table">
    <thead>
        <tr>
            <th>Surgeon name</th>
            <th>Country</th>
            <th>Antiquity</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr class="grey"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="grey"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="grey"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
        <tr class="sales-details"><td></td></tr>
    </tbody>
</table>

Answer 1

将一个点击处理程序附加到灰色行（我可能会委托它），然后在处理程序this中将引用单击的行。您可以使用nextUntil选择跟随它的行，直到匹配的选择器：

所以：

$("selector-for-the-table").on("click", "tr.grey", function() {
    $(this).nextUntil(".grey").show();
});

示例：

$(".modal-table").on("click", "tr.grey", function() {
    $(this).nextUntil(".grey").show();
});

.modal-table .sales-details {
  display: none;
}

<table width="100%" class="modal-table" id="modal-table">
  <thead>
    <tr>
      <th>Surgeon name</th>
      <th>Country</th>
      <th>Antiquity</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr class="grey">
      <td>grey 1</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 1</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 1</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 1</td>
    </tr>
    <tr class="grey">
      <td>grey 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="grey">
      <td>grey 3</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 3</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 3</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另一个选择是将行分组为tbody元素，并使用.closest("tbody").next().show()显示整个tbody：

$("selector-for-the-table").on("click", "tr.grey", function() {
    $(this).closest("tbody").next().show();
});

示例：

$(".modal-table").on("click", "tr.grey", function() {
    $(this).closest("tbody").next().show();
});

.modal-table .tbody-details {
  display: none;
}

<table width="100%" class="modal-table" id="modal-table">
  <thead>
    <tr>
      <th>Surgeon name</th>
      <th>Country</th>
      <th>Antiquity</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr class="grey">
      <td>grey 1</td>
    </tr>
  </tbody>
  <tbody class="tbody-details">
    <tr class="sales-details">
      <td>detail group 1</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 1</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="grey">
      <td>grey 2</td>
    </tr>
  </tbody>
  <tbody class="tbody-details">
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="grey">
      <td>grey 3</td>
    </tr>
  </tbody>
  <tbody class="tbody-details">
    <tr class="sales-details">
      <td>detail group 3</td>
    </tr>
    <tr class="sales-details">
      <td>detail group 3</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在单击行之后立即定位行直到特定行

1 个答案: