jquery - 显示/隐藏使用点击事件随机生成的表格元素

Question

我有多个随机生成的表。我只希望显示每个表的第一行，隐藏其余行。当我单击表格的可见行时，我希望显示/隐藏其其余行/内容。我将如何使用 Jquery 来完成此任务？

Answer 1

隐藏除第一行之外的所有行:

$("table tbody tr:not(:first-child)").hide();

要在单击第一行时使它们可见:

$("table tbody tr:first-child").click(function() {
  $(this).siblings().show();
});

或者，您可能希望稍微不同地组织表格(如果可能):

<style type="text/css">
table tbody tr { display: none; }
</style>
<script type="text/javascript">
$(function() {
  $("table thead tr").click(function() {
    $("tbody tr", $(this).parents("table")[0]).show();
  });
});
</script>
<table>
<thead>
  <tr> ... first row is in thead not tbody ... </tr>
</thead>
<tbody>
  <tr> ... row1 .. </tr>
  <tr> ... row2 .. </tr>
  <tr> ... row3 .. </tr>
</tbody>
</table>

有很多方法可以给这只特定的猫剥皮。