显示/隐藏指定的表格行数答案

【问题标题】：Show/Hide specified number of table row显示/隐藏指定的表格行数
【发布时间】：2014-09-17 10:33:37
【问题描述】：

这是 HTML 表格：

<table>
    <tbody>
        <tr>
            <th style="border-bottom:1px solid #EB8D01;font-size: 12px;font-weight: bold;font-family: verdana, helvetica, sans-serif;padding-bottom: 2px;"><a href="0/posts/10-Auto/">Auto</a> <span class="count">(1)</span> </th>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/17-Cars/">Cars</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/18-Car-Accessories/">Car Accessories</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/20-Car-Cleaning-Detailing/">Car Cleaning &amp; Detailing</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/24-Car-Audio/">Car Audio</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/29-Motorcycles/">Motorcycles</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/35-Other-Commercial-Vehicles/">Other Commercial Vehicles</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/39-Driving-Schools/">Driving Schools</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/41-Service-repairs/">Service &amp; repairs</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/42-Spare-parts/">Spare parts</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/43-Transport-Services/">Transport Services</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/393-Boats-Jet-Skis/">Boats &amp; Jet Skis</a><br></td>
        </tr>
    </tbody>
</table>

JSFiddle

我想通过底部的显示/隐藏链接显示指定数量的表格行（例如 5 行）。

任何帮助将不胜感激。

【问题讨论】：

试过这个：$("table tr:gt(5)").hide();但它没有用。
它给出一个警告是有原因的，即指向 JS fiddle 的链接需要附有代码。请不要忽视它或绕过它。发布您问题中的所有代码以及您尝试过的内容。
@user3216677 您的代码在fiddle 中工作。
@user3216677 你能检查我的答案吗？

标签： jquery html css jscript

【解决方案1】：

试试.nth-child()，如图：-

$("table tr:nth-child(5)").hide(); //in '.nth-child()' count starts from 1

或

$("table").find('tr').eq(4).hide();  // in '.eq()' count starts from 0

以上显示的答案将仅隐藏指定的行，即仅'5th' 行，如果需要隐藏5th 行之后的所有行，请尝试以下答案。

DEMO

Demo with show hide option.

$("table tr:gt(5)").hide();

DEMO

【讨论】：

@user3216677..您包含的小提琴没有包含 jquery 文件，这就是问题发生的原因..请参阅答案中的演示。
谢谢Kartikeya，但是底部的显示/隐藏链接呢？
出现问题，显示/隐藏链接无法正常工作。它没有隐藏 5 以下的所有行。
这次辛苦了，谢谢！

【解决方案2】：

你可以使用这样的东西，像这样改变你的 HTML：

<a href="#">Show / Hide All</a>
<table>
    <tbody>
        <tr>
            <th style="border-bottom:1px solid #EB8D01;font-size: 12px;font-weight: bold;font-family: verdana, helvetica, sans-serif;padding-bottom: 2px;">
                <a href="0/posts/10-Auto/">Auto</a> <span class="count">(1)</span>
            </th>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/17-Cars/">Cars</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/18-Car-Accessories/">Car Accessories</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/20-Car-Cleaning-Detailing/">Car Cleaning &amp; Detailing</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/24-Car-Audio/">Car Audio</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/29-Motorcycles/">Motorcycles</a><br></td>
        </tr>
    </tbody>
    <tbody class="more hidden">
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/35-Other-Commercial-Vehicles/">Other Commercial Vehicles</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/39-Driving-Schools/">Driving Schools</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/41-Service-repairs/">Service &amp; repairs</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/42-Spare-parts/">Spare parts</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/43-Transport-Services/">Transport Services</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/393-Boats-Jet-Skis/">Boats &amp; Jet Skis</a><br></td>
        </tr>
    </tbody>
</table>

这是 jQuery：

$(document).ready(function(){
    $("a").click(function(){
        $(".more").toggleClass("hidden");
        return false;
    });
});

小提琴：http://jsfiddle.net/praveenscience/rkss956e/

【讨论】：

不幸的是，我无法对 html 表进行任何更改，因为数据是从 sql 数据库中获取的。