隐藏特定行后的所有行

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

$("#row_x").nextAll('tr').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>

刚刚尝试这样

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