如何使用 jQuery 隐藏表格的中间? [英] How do I hide the middle of a table using jQuery?
问题描述
我有一个非常长的 3 列表格.我愿意
I have a really long 3 column table. I would like to
<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 获得的结果.
This is the result I'm trying to obtain using jQuery.
Column1 Column2
Column1 Column2
...Show Full Table...
Column1 Column2
Column1 Column2
我想使用 jQuery 的显示/隐藏功能来最小化表格，但仍显示顶部和底部行的一部分.中间的行应替换为显示完整表格"之类的文本，单击时将展开以从头到尾显示完整表格.
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?
顺便说一句，我已经尝试向某些行添加一个Table_Middle"类，但它并没有完全隐藏它，它占用的空间仍然存在，而且我没有文本可以让用户完全展开表格.
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.
添加了受 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>
链接我的 博客文章 和工作示例.
Link my blog post and working example.
推荐答案
这样的事情可以工作:
<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();
});
这篇关于如何使用 jQuery 隐藏表格的中间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
