当前位置:  开发笔记 > 编程语言 > 正文

如何使用jQuery隐藏表的中间?

如何解决《如何使用jQuery隐藏表的中间?》经验,为你挑选了1个好方法。

我有一个非常长的3列表.我想要

Column1Column2
Column1Column2
StartHiding
Column1Column2
Column1Column2
Column1Column2
EndHiding
Column1Column2
Column1Column2

这是我试图使用jQuery获得的结果.

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

我想使用jQuery的显示/隐藏功能来最小化表格,但仍然显示顶部和底部行的一部分.中间行应替换为"显示全表"之类的文本,单击时将展开以显示从开始到结束的完整表.

在jQuery中执行此操作的最佳方法是什么?

BTW我已经尝试在一些行中添加一个类"Table_Middle",但它并没有完全隐藏它占用的空间仍然存在,我没有文本给用户扩展表的方法充分.

[编辑]添加了工作示例HTML,灵感来自Parand发布的答案

下面的示例是一个完整的工作示例,您甚至不需要下载jquery.只需粘贴到空白HTML文件中即可.

如果关闭Javascript,它会很好地降低以仅显示完整的表格.如果Javascript打开,则它会隐藏中间表行并添加显示/隐藏链接.


    
        
        Example Show/Hide Middle rows of a table using jQuery
        
        
    
    
        
Month NameMonth
Jan1
Feb2
Mar3
Apr4
May5

[编辑]链接我的博客文章和工作示例.



1> Parand..:

像这样的东西可以工作:

Column1Column2
Column1Column2
StartHiding
Column1Column2
Column1Column2
Column1Column2
EndHiding
Column1Column2
Column1Column2
$('#something').click( function() { $('.Table_Middle').hide(); $('.Show_Rows').show(); }); $('.Show_Rows').click( function() { $('.Show_Rows').hide(); $('.Table_Middle').show(); });

推荐阅读
wurtjq
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有