如何使用jQuery隐藏表格的中间？ [英] How do I hide the middle of a table using jQuery?
问题描述
< table>
< tr>< td> Column1< / td>< td> Column2< / td>< / tr>
< tr>< td> Column1< / td>< td> Column2< / td>< / tr>
< tr>< td>开始< / td>< td>隐藏< / 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>结束< / td>< td>隐藏< / td>< / tr>
< tr>< td> Column1< / td>< td> Column2< / td>< / tr>
< tr>< td> Column1< / td>< td> Column2< / td>< / tr>
< / table>
这是我试图用jQuery获得的结果。
Column1 Column2
Column1 Column2
...显示完整表格...
Column1 Column2
Column1 Column2
我想使用jQuery的显示/隐藏功能来最小化表格，但仍显示顶部和底部行。中间的行应该替换为显示完整表格之类的文本，点击后将展开以显示从头到尾的完整表格。
什么是最佳方式在jQuery中做到这一点？
顺便说一句，我已经尝试添加一个类Table_Middle到一些行，但它并没有完全隐藏它占据的空间仍然存在，我没有文字给用户一种完全展开表格的方法。
新增工作示例HTML受Parand's发布回答
下面的例子是一个完整的工作示例，您甚至不需要下载jquery。只需粘贴到一个空白的HTML文件中即可。 b 如果关闭Javascript，则只会显示完整表格。如果Javascript处于打开状态，则会隐藏中间的表格行并添加显示/隐藏链接。 将我的博客文章和工作示例。 I have a really long 3 column table. I would like to This is the result I'm trying to obtain using 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. What is the best way to do this in 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. [EDIT] Added Working Example HTML inspired by Parand's posted answer The example below is a complete working example, you don't even need to download jquery. Just paste into a blank HTML file. 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. [EDIT] Link my blog post and working example. Something like this could work:
这篇关于如何使用jQuery隐藏表格的中间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< html> ;
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = windows-1252>
< title>示例使用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 ='隐藏一些行<<< / a>< / td>< / tr>）;
$（＃ShowHide）。html（< tr>< td colspan ='2'>< a href ='＃'>显示/隐藏中间行< / a>< / td>< / tr>）;
$（ #HiddenRows）。hide（）;
$（'＃ShowHide，＃HiddenRowsNotice'）。click（function（）{
$（'＃HiddenRows'）。toggle（） ;
$（'＃HiddenRowsNotice'）。toggle（）;
}）;
}）;
< / script>
< / head>
< body>
< table>
< tbody id =ShowHide>< / tbody>
< tr>< th>月份名称< / th>< th>月份< / 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>五月< / 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>开始< / td>< td>隐藏< / td>< / tr>
< / tbody>
< tbody class =Table_Middlestyle =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>隐藏< / td>< / tr>
< tr>< td> Column1< / td>< td> Column2< / td>< / tr>
< tr>< td> Column1< / td>< td> Column2< / td>< / tr>
< / tbody>
< / table>
$ b $（'＃something'）。click（function（）{
$（'。Table_Middle'）。hide（）;
$（'。 Show_Rows'）。show（）;
}）;
$ b $（'。Show_Rows'）。click（function（）{
$（'。Show_Rows'）。hide（）;
$（'。Table_Middle'）。 show（）;
}）;
<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>
Column1 Column2
Column1 Column2
...Show Full Table...
Column1 Column2
Column1 Column2
<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();
});
