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

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

如果调用的attachEvent与表的id产生时，它会绑定事件的第一行。

这些函数假定该表的所有行都被设置为display：none。

我没有测试过这个，但理论应该工作。你可能需要改变一些事情，比如绑定哪个事件，以及是否使用tr或tds来显示/隐藏。

Answer 3

我遇到了类似的需求，但显示/隐藏tbody（jQuery在尝试切换大量行时似乎崩溃了）。我的表是由类“数据表”确定我用.toggle（）（可自jQuery的1.0版本）的基础上克莱图斯的解决方案：

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

}) 

这里假设你有你的表根据与THEAD和HTML5规范组织TBODY。 另请参阅http://api.jquery.com/toggle/