隱藏特定行後的所有行

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();