Отображение и скрытие строки в таблице с помощью jquery

Question

Мне было интересно, можно ли скрыть и показать строку в таблице, нажав кнопку с помощью jquery. Я знаю основы шкуры и шоу.

получил это для работы, используя toggle и давая 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(); 

или

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

, где 2 - второй ряд. Вы можете изменить его соответствующим образом:

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

Answer 2

Некоторые пример того, что вы можете сделать с hide и show функции JQuery:

$(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 бесплатно спросить.