隐藏特定行之后的所有行

Question

我正在使用C＃，.NET Framework 4.7和jQuery 3.1.1开发ASP.NET MVC应用程序。

我有一张桌子的视图：

<table id="myTable">
<tbody>
   <tr> ... </tr>
   <tr> ... </tr>
   <tr> ... </tr>
   <tr id="row_x"> ... </tr>
   <tr> ... </tr>
   <tr> ... </tr>
   <tr> ... </tr>
   ...

我想隐藏行<tr id="row_x"> ... </tr>下的所有行，但我不知道如何访问这些行。我是否需要为所有人设置ID？

我想用<div>围绕他们，但我认为这不是一个好主意或可能。

Answer 1

您可以使用jQuery方法nextAll()

$("#row_x").nextAll().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
    <tr id="row_x">
      <td>Row 5</td>
    </tr>
    <tr>
      <td>Row 6</td>
    </tr>
    <tr>
      <td>Row 7</td>
    </tr>
    <tr>
      <td>Row 8</td>
    </tr>
    <tr>
      <td>Row 9</td>
    </tr>
  </tbody>
</table>

Answer 2

＆＃13;

＆＃13;

$("#row_x").nextAll('tr').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
    <tr id="row_x">
      <td>Row 5</td>
    </tr>
    <tr>
      <td>Row 6</td>
    </tr>
    <tr>
      <td>Row 7</td>
    </tr>
    <tr>
      <td>Row 8</td>
    </tr>
    <tr>
      <td>Row 9</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

试试这个

 $('#row_x').nextAll('tr').hide();