如何使用jQuery隐藏表格的中间?

我有一个很长的3列表。 我想要

<table> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Start</td><td>Hiding</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>End</td><td>Hiding</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> </table> 

这是我试图获得使用jQuery的结果。

 Column1 Column2 Column1 Column2 ...Show Full Table... Column1 Column2 Column1 Column2 

我想使用jQuery的显示/隐藏function,尽量减less表,但仍然显示顶部和底部行的一部分。 中间的行应该replace为“Show Full Table”(显示完整表格)之类的文本,点击的时候会展开,从头到尾显示完整的表格。

在jQuery中做这件事的最好方法是什么?

顺便说一句我已经尝试添加一个类“Table_Middle”的一些行,但它并没有完全隐藏它占据的空间仍然存在,我没有文字给用户一种方法来扩大表充分。

[编辑]添加工作示例HTML启发Parand的张贴答案

下面的例子是一个完整的工作示例,你甚至不需要下载jQuery。 只需粘贴到一个空白的HTML文件。

如果Javascriptclosures,它会很好地降低显示全表。 如果Javascript处于打开状态,则会隐藏中间的表格行并添加显示/隐藏链接。

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Example Show/Hide Middle rows of a table using jQuery</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>"); $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>"); $("#HiddenRows").hide(); $('#ShowHide,#HiddenRowsNotice').click( function() { $('#HiddenRows').toggle(); $('#HiddenRowsNotice').toggle(); }); }); </script> </head> <body> <table> <tbody id="ShowHide"></tbody> <tr><th>Month Name</th><th>Month</th></tr> <tbody> <tr><td>Jan</td><td>1</td></tr> </tbody> <tbody id="HiddenRowsNotice"></tbody> <tbody id="HiddenRows"> <tr><td>Feb</td><td>2</td></tr> <tr><td>Mar</td><td>3</td></tr> <tr><td>Apr</td><td>4</td></tr> </tbody> <tbody> <tr><td>May</td><td>5</td></tr> </tbody> </table> </body> </html> 

[编辑]链接我的博客文章和工作示例。

像这样的东西可以工作:

 <table> <tbody> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr> </tbody> <tbody class="Table_Middle" style="display:none"> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> </tbody> <tbody> <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> </tbody> </table> $('#something').click( function() { $('.Table_Middle').hide(); $('.Show_Rows').show(); }); $('.Show_Rows').click( function() { $('.Show_Rows').hide(); $('.Table_Middle').show(); }); 

最简单的方法是添加一个<tbody>来对行进行分组,并在nonetable-row-group之间切换(捕获exception并将其设置为IE block )。 不确定是否特定于jQuery,但这是“正常”的做事方式。

这是一个解决scheme,不需要任何额外的标记,它很好地降解。

 <table id="myTable"> <tbody> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> </tbody> </table> 

和jQuery的…我已经硬编码在这里的一些东西(如表标识符,显示的行数等,如果你希望它是更可重用的话,这些可以放在表上的class属性。例如: <table class="hidey_2">

 var showTopAndBottom = 2, minRows = 4, $rows = $('#myTable tr').length), length = $rows.length ; if (length > minRows) { $rows .slice(showTopAndBottom, length - showTopAndBottom) .hide() ; $rows .eq(showTopAndBottom - 1) .after( // this colspan could be worked out by counting the cells in another row $("<tr><td colspan=\"2\">Show</td></tr>").click(function() { $(this) .remove() .nextAll() .show() ; }) ) ; } 

尝试使用slice()方法:

 $("#table tr").slice(1, 4).hide(); 

如果您将中间的<tr />标签放在“ Table_Middle ”类中, Table_Middle容易实现。 那么只需要几行jQuery。 一个添加“显示完整表”行,另一个添加该行的点击侦听器。 确保将colspan属性的“X”值更改为表中的列数。

  // jQuery chaining is useful here $(".Table_Middle").hide() .eq(0) .before('<tr colspan="X" class="showFull">Show Full Table<tr/>'); $(".showFull").click(function() { $(this).toggle(); $(".Table_Middle").toggle(); }); 

这很有用,因为它很好地降级,并且可以通过许多浏览器/设备访问。 如果JavaScript被closures,或CSS被禁用(或其他可能导致此代码不受支持的情况),则不会显示“show full table”行。

我可能会这样做:

 <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> <tbody> <tr> <td>data1</td> <td>data1</td> <td>data1</td> </tr> ... </tbody> <tbody id="hidden-rows"> <tr> <td colspan="3"> <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();"> Show hidden rows </a> </td> </tr> </tbody> <tbody id="extra-rows" style="display: none;"> <tr> <td>data1</td> <td>data1</td> <td>data1</td> </tr> ... </tbody> <tbody> <tr> <td>data1</td> <td>data1</td> <td>data1</td> </tr> ... </tbody> </table> 

这不是一个好方法,因为它不会很好地降解。

为了使它很好地降级,你必须首先显示所有的行,然后用你的jQuery文档就绪函数隐藏它们,并且创build链接的行。

此外,你给的行隐藏一个特定的类的方法也应该工作。 jQuery看起来像这样:

 $(document).ready(function() { $('tr.Table_Middle').hide(); }); 

你仍然需要创build一个链接来取消隐藏的行。