Question

我想知道是否可以通过使用jquery单击按钮来隐藏和显示表中的行。我知道隐藏和展示的基础知识。

通过使用切换并在表中为tr提供id来实现此功能。

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是第2行。您可以相应地更改它：

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

Answer 2

使用jQuery的hide和show函数可以执行的操作的一些示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您需要特定的东西，请随意提问。

使用jquery

2 个答案: