如何使用 jQuery 隐藏表格的中间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/215219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I hide the middle of a table using jQuery?
提问by Brian Boatright
I have a really long 3 column table. I would like to
我有一个很长的 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>
This is the result I'm trying to obtain using jQuery.
这是我试图使用 jQuery 获得的结果。
Column1 Column2
Column1 Column2
...Show Full Table...
Column1 Column2
Column1 Column2
I would like to use jQuery's show/hide feature to minimize the table but still show part of the top and bottom rows. The middle rows should be replace with text like "Show Full Table" and when clicked will expand to show the full table from start to finish.
我想使用 jQuery 的显示/隐藏功能来最小化表格，但仍显示顶部和底部行的一部分。中间行应替换为“显示完整表格”之类的文本，单击时将展开以从头到尾显示完整表格。
What is the best way to do this in jQuery?
在 jQuery 中执行此操作的最佳方法是什么？
BTW I've already tried adding a class "Table_Middle" to some of the rows but it doesn't hide it completely the space it occupied is still there and I don't have the text to give the user a way to expand the table fully.
顺便说一句，我已经尝试向某些行添加一个类“Table_Middle”，但它并没有完全隐藏它占用的空间仍然存在，而且我没有文本可以为用户提供一种扩展表格的方法充分。
[EDIT] Added Working Example HTML inspired by Parand's posted answer
[编辑] 添加了受 Parand 发布的答案启发的工作示例 HTML
The example below is a complete working example, you don't even need to download jquery. Just paste into a blank HTML file.
下面的示例是一个完整的工作示例，您甚至不需要下载 jquery。只需粘贴到一个空白的 HTML 文件中。
It degrades nicely to show only the full table if Javascript is turned off. If Javascript is on then it hides the middle table rows and adds the show/hide links.
如果关闭 Javascript，它会很好地降级以仅显示完整的表格。如果 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>
[EDIT] Link my blog postand working example.
[编辑] 链接我的博客文章和工作示例。
回答by Parand
Something like this could work:
这样的事情可以工作：
<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();
});
回答by Greg
The easiest way is to add a <tbody>in to group the rows and toggle that between noneand table-row-group(catch exceptions and set it to blockfor IE). Not sure about making it specific to jquery but that's the "normal" way of doing things.
最简单的方法是添加一个<tbody>in 来对行进行分组并在none和之间切换table-row-group（捕获异常并将其设置block为 IE）。不确定是否将其特定于 jquery，但这是“正常”的做事方式。
回答by nickf
Here's a solution which doesn't require any extra markup and it degrades nicely.
这是一个不需要任何额外标记并且可以很好地降级的解决方案。
<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>
and the jQuery... I've hardcoded in a few things here (like the table identifier, number of rows to show, etc. These could be put into a classattribute on the table if you wanted it to be more reusable. (eg: <table class="hidey_2">)
和 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()
;
})
)
;
}
回答by Elzo Valugi
Try to use slice() method:
尝试使用 slice() 方法：
$("#table tr").slice(1, 4).hide();
回答by Dan Herbert
If you give your middle <tr />tags the "Table_Middle" class it makes it much easier to do. Then it only takes a few lines of jQuery. One to add the "Show Full Table" row, and another to add a click listener for that row. Make sure to change the colspanattribute's "X" value to the number of columns in your table.
如果你给你的中间<tr />标签“ 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();
});
This is useful because it degrades nicely and is accessible across lots of browsers/devices. If JavaScript is turned off, or CSS is disabled (or any other scenario that could cause this code to not be supported), there is no "show full table" row.
这很有用，因为它可以很好地降级并且可以跨许多浏览器/设备访问。如果 JavaScript 被关闭，或者 CSS 被禁用（或任何其他可能导致不支持此代码的情况），则没有“显示完整表格”行。
回答by SpoonMeiser
I'd probably do it like this:
我可能会这样做：
<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>
It's not a great method, because it doesn't degrade nicely.
这不是一个很好的方法，因为它不会很好地降级。
To get it to degrade nicely, you'd have to have all the rows shown initially, and then hide them with your jQuery document ready function, and also create the row with the link in.
为了让它很好地降级，您必须首先显示所有行，然后使用 jQuery 文档就绪函数隐藏它们，并创建带有链接的行。
Also, your method of giving the rows to hide a particular class should also work. The jQuery would look something like this:
此外，您提供行以隐藏特定类的方法也应该有效。jQuery 看起来像这样：
$(document).ready(function() {
$('tr.Table_Middle').hide();
});
You'd still need to create the row with the link to unhide them though.
您仍然需要使用链接创建行以取消隐藏它们。
