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

我正在处理一个包含多个表的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>

两件事：

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

其次，您需要使用event.preventDefault来防止在单击链接时跟随链接

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

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

您正在查找所有表并切换

查找已单击链接的上一个同级并切换：

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

请参阅更新的小提琴：

---

下面的代码将更好地保证所有适当的TR元素同时切换。否则，根据它们的初始状态，一些可以关闭，而另一些可以打开-即反相

HTML

---

这可能看起来很奇怪，但对安全的惩罚很小。我曾经做过类似的事情来修复之前的一个错误。

谢谢，你的解决方案对我很有效。默认情况下是否可以隐藏类别？它们应该只有在点击显示/隐藏链接后才可见。谢谢，我仍然在寻找默认情况下隐藏类别的解决方案。你可以在CSS中这样做。看见

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

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

$("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.