如何使用jQuery隐藏表格的中间部分？
如何使用jQuery隐藏表格的中间部分？
提问于 2008-10-18 16:22:35
我有一个很长的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的显示/隐藏功能来最小化表格，但仍然显示顶部和底部的部分行。中间的行应替换为"Show Full Table“之类的文本，单击时将展开以从头到尾显示完整的表格。
在jQuery中实现这一点的最佳方法是什么？
顺便说一句，我已经尝试添加一个类"Table_Middle“到一些行，但它并没有完全隐藏它，它占用的空间仍然在那里，我没有文本来给用户一个完全展开表的方法。
受发布的答案启发，HTML EDIT添加了工作示例
下面的示例是一个完整的工作示例，您甚至不需要下载。只需粘贴到一个空白的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和工作示例。
回答 6
Stack Overflow用户
回答已采纳
发布于 2008-10-18 16:33:00
像这样的东西可能会起作用：
<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();
});Stack Overflow用户
发布于 2008-10-18 16:27:43
最简单的方法是添加一个<tbody>来对行进行分组，并在none和table-row-group之间切换(对于IE，捕获异常并将其设置为block )。不确定是否特定于jquery，但这是“正常”的做法。
Stack Overflow用户
发布于 2008-10-20 01:39:35
这里有一个解决方案，它不需要任何额外的标记，并且它可以很好地降级。
<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()
;
})
)
;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/215219
复制相关文章
相似问题