如何使用 jQuery 隐藏表格的中间？
Posted
技术标签:
【中文标题】如何使用 jQuery 隐藏表格的中间？【英文标题】：How do I hide the middle of a table using jQuery? 【发布时间】：2010-09-17 22:20:25 【问题描述】：我有一个很长的 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 的显示/隐藏功能来最小化表格，但仍然显示顶部和底部行的一部分。中间行应替换为“显示完整表格”之类的文本，单击时将展开以显示从开始到结束的完整表格。
在 jQuery 中最好的方法是什么？
顺便说一句，我已经尝试在某些行中添加一个类“Table_Middle”，但它并没有完全隐藏它，它占用的空间仍然存在，而且我没有文本给用户一种方法完全展开表格。
[编辑] 添加了受 Parand 发布的答案启发的工作示例 HTML
下面的例子是一个完整的工作例子，你甚至不需要下载 jquery。只需粘贴到一个空白的 html 文件中。
如果关闭 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>
[编辑] 链接我的blog post 和工作示例。
【问题讨论】：
【参考方案1】：尝试使用 slice() 方法：
$("#table tr").slice(1, 4).hide();
【讨论】：
【参考方案2】：这是一个不需要任何额外标记的解决方案，它可以很好地降级。
<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()
;
)
)
;
【讨论】：
【参考方案3】：这样的事情可能会奏效：
<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();
);
【讨论】：
【参考方案4】：如果你给你的中间<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();
);
这很有用，因为它可以很好地降级并且可以跨许多浏览器/设备访问。如果 JavaScript 被关闭，或 CSS 被禁用（或任何其他可能导致此代码不受支持的情况），则没有“显示完整表格”行。
【讨论】：
你测试过这个吗？我认为 get 方法返回一个 DOM 对象，而不是 jquery 对象，并且我认为您只是隐藏了第一行 Table_Middle 因为在 get 之后调用了 hide。我也没有测试过它，但如果我是对的，那么它需要稍微重新安排才能工作。 你是对的。我不敢相信我错过了。 “get()”返回一个 DOM 对象。我已经更新了我的代码示例以确认这一点。 您可以只使用 .eq(0) 而不是 .get(0) 来返回 jQuery 而不是 DOM 元素。但这完全是最好的答案。【参考方案5】：我可能会这样做：
<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 文档准备函数隐藏它们，并创建包含链接的行。
此外，您提供隐藏特定类的行的方法也应该有效。 jQuery 看起来像这样：
$(document).ready(function()
$('tr.Table_Middle').hide();
);
您仍然需要创建带有链接的行才能取消隐藏它们。
【讨论】：
【参考方案6】：最简单的方法是添加一个<tbody> 来对行进行分组并在none 和table-row-group 之间切换（捕获异常并将其设置为block 对于IE）。不确定是否使其特定于 jquery，但这是“正常”的做事方式。
【讨论】：
以上是关于如何使用 jQuery 隐藏表格的中间？的主要内容，如果未能解决你的问题，请参考以下文章