Question

我正在处理一个包含多个表的HTML页面，每个表都包含大量行。这些表行在网页上占用了太多空间，所以我试图在每个表下面创建一个只显示指定行数的显示/隐藏链接。我在STACKOVERFLOW上发现了一些脚本，但由于某些原因无法让它们工作。任何帮助将不胜感激......

这是表格的一个例子：

<table border="0" cellspacing="0" cellpadding="0" width="98%" class="dir_cat">
<tr><th><a href="/posts/10-Auto/">Auto</a></th></tr>
<tr class="Auto"><td><a href="/Cars/">Cars</a></td></tr>
<tr class="Auto"><td><a href="/Accessories/">Car Accessories</a></td></tr>
<tr class="Auto"><td><a href="/Detailing/">Car Detailing</a></td></tr>
<tr class="Auto"><td><a href="/Car-Audio/">Car Audio</a></td></tr>
<tr class="Auto"><td><a href="/Motorcycles/">Motorcycles</a></td></tr>
<tr class="Auto"><td><a href="/Commercial-Vehicles/">Other Commercial Vehicles</a></td></tr>
</table>
<a href="#">Show/Hide Categories</a>
<br>

<table border="0" cellspacing="0" cellpadding="0" width="98%" class="dir_cat">
<tr><th><a href="0/posts/10-Auto/">Antiques</a></th></tr>
<tr class="Antiques"><td><a href="/Arch/">Architectural</a></td></tr>
<tr class="Antiques"><td><a href="/Art-Deco/">Art Deco</a></td></tr>
<tr class="Antiques"><td><a href="/Art-Nouveau/">Art Nouveau</a></td></tr>
<tr class="Antiques"><td><a href="/Asian-Antiques/">Asian Antiques</a></td></tr>
<tr class="Antiques"><td><a href="/Books/">Books</a></td></tr>
<tr class="Antiques"><td><a href="/Publications/">Publications</a></td></tr>
</table>    
<a href="#">Show/Hide Categories</a>    
<br>

<table border="0" cellspacing="0" cellpadding="0" width="98%" class="dir_cat">
<tr><th><a href="/Art/">Art</a></th></tr>
<tr class="Art"><td><a href="Aboriginal/">Aboriginal</a></td></tr>
<tr class="Art"><td><a href="/Art-Cards/">Art Cards</a></td></tr>
<tr class="Art"><td><a href="/Drawings/">Drawings</a></td></tr>
<tr class="Art"><td><a href="/Fabric-Art/">Fabric Art</a></td></tr>
<tr class="Art"><td><a href="/Folk-Art/">Folk Art</a></td></tr>
<tr class="Art"><td><a href="/Mixed-Media/">Mixed-Media</a></td></tr>
<tr class="Art"><td><a href="/Publications/">Publications</a></td></tr>
</table>    
<a href="#">Show/Hide Categories</a>    
<br>

JS：

$("a").click(function(){
    $("table tr:gt(3)").toggle();
});

JSFiddle

Answer 1

两件事：

首先，您需要使您的选择器仅匹配链接前的表中的行，而不是所有表。

其次，当您点击链接时，您需要使用event.preventDefault()来阻止关注链接。

第三，您应该为这些链接指定一个独特的类，这样您就不会将处理程序绑定到页面上的所有链接。

$("a.showhide").click(function (event) {
    $(this).prev("table").find("tr:gt(3)").toggle();
    event.preventDefault();
});

DEMO

Answer 2

您正在查找所有table并切换。

找到所点击链接的上一个兄弟并切换：

$(this).prev().find("tr:gt(3)")

请参阅更新的小提琴：

http://jsfiddle.net/17dnu0e4/5/

Answer 3

以下代码将更好地保证所有适当的TR元素切换为同情。否则，根据它们的初始状态，有些可以切换为OFF而其他可以切换为ON - 即反相！

HTML

...
<a class="tableToggler" href="#">Show/Hide Categories</a>

jQuery

$("a.tableToggler").on('click', function (e) {
    e.preventDefault();
    var $tr = $(this).prev("table").find("tr:eq(4)").toggle();//toggle tr:eq(4).
    $tr.nextAll().toggle(!$tr.is(":hidden"));//set all following trs to be the same as tr:eq(4).
}).prev("table").find("tr:eq(4)").show().end().end().trigger('click');//this will guarantee that each tr:eq(4) is ON, then toggle it and its fellow TRs to OFF.

这似乎是OTT，但对安全的惩罚非常小。我不得不做一些类似的事情，以解决早先的搞砸问题。

显示/隐藏指定数量的表行

3 个答案: