jqueryを使用してテーブル内の行を表示および非表示

Question

jqueryを使用してボタンをクリックすると、テーブルに行を表示して非表示にすることができるかどうかは疑問でした。私はhideとshowの基本を知っています。

がこのトグルを使用して、テーブル内のidをTRを与えることによって動作するようになりました。

Answer 1

は、私はあなたがやりたい正確にわからないんだけど、私たちは、例えば、次のHTMLコードを考慮する場合：

 <table> 
    <tr> 
    <th>col11</th> 
    <th>col12</th> 
    <th>col13</th> 
    </tr> 
    <tr> 
    <td>col21</td> 
    <td>col22</td> 
    <td>col23</td> 
    </tr> 
    <tr> 
    <td>col31</td> 
    <td>col32</td> 
    <td>col33</td> 
    </tr> 
</table> 

は、あなただけ書くことができます。

$("table tr:nth-child(2)").hide(); 

または

を図2は、2番目の行である

$("table tr:nth-child(2)").show(); 

。あなたはそれに応じて変更することができます。

https://jsfiddle.net/gebf2pf2/2/

Answer 2

あなたはjQueryののhideとshow機能で何ができるかのいくつかの例：

$(document).ready(function() { 
 
    // Hide row button click 
 
    $(".hideRowsButton").click(function() { 
 
    $(this).closest("tr").hide(); 
 
    }); 
 
    
 
    // Show all rows button click 
 
    $("#showRowsButton").click(function() { 
 
    // Selects every hidden row of the table 
 
    $("#myTable tr:hidden").show(); 
 
    }); 
 
});

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

 
<table id="myTable"> 
 
    <thead> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
     <td>Action</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>30</td> 
 
     <td><button type="button" class="hideRowsButton">Hide</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Steve</td> 
 
     <td>55</td> 
 
     <td><button type="button" class="hideRowsButton">Hide</button></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br/> 
 
<button type="button" id="showRowsButton">Show all rows</button>

あなたが特定の何かが必要な場合は、fleelをお気軽にお問い合わせください。