如何使用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>来对行进行分组，并在none和table-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一个链接来取消隐藏的行。
