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>

有很多方法可以为这只特殊的猫提供皮肤。

Answer 2

你应该写一些这样的函数：

function AttachEvent(tableId)
{
    $("#" + tableId + " tbody tr:first-child").click(ToggleRows);
}

function ToggleRows(e)
{
    // get src table of e
    // you can find code for this on SO or quirksmode.org (or basically anywhere)

    $(src).find("tr").hide();
    $(src).find("tr:first-child").show();
}

如果在生成表时使用表的id调用AttachEvent，它会将事件绑定到第一行。

这些函数假设生成的表包含除row [0]设置为display：none之外的所有行。

我没有测试过这个，但理论应该有效。您可能需要更改某些事件，例如要绑定哪个事件，以及是否使用tr或tds来显示/隐藏。

Answer 3

我遇到了类似的需求，但显示/隐藏tbody（jQuery似乎在尝试切换大量行时崩溃）。我的表由类'datatable'标识，我使用.toggle（）（自jQuery版本1.0起可用）基于Cletus的解决方案：

$(document).ready(function() {
        //SK toggles datatables (show/hide tbody when clicking thead)
       $('table.datatable thead tr').on('click', function( event ) { 
           $('tbody', $(this).parents('table')[0]).toggle(); });

})

这假设您根据html5规范对thead和tbody组织了表格。另见http://api.jquery.com/toggle/

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

3 个答案: