Question

我的表格如下所示，行数为“n”。

    <table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
</table>
    <span class="more">Show more</span>

最初在页面加载时，我想只显示两行。如果我点击“更多”链接，我只想在每次点击时显示或显示3行。

如何使用jquery获取此功能。示例代码here. 提前谢谢。

Answer 1

首先隐藏除了前两个tr之外的所有内容：css：

table tr {display:none;}
table tr:first-child, table tr:nth-child(2) {display:block}

然后获取最后一个可见tr的索引，并显示接下来的三个等。

$('.more').on('click', function() {
    var vis = $('table tr:visible').last().index();
    $('table tr').slice(vis, vis+4).show();
});

FIDDLE

Answer 2

您可以使用CSS3 <tr>选择器隐藏剩余的nth-child：

tr:nth-child(n+4) {
    display:none;
}

然后点击显示更多链接使用JQuery来显示它们：

$('.more').click(function() {
    $('tr').show();
});

示例：http://jsfiddle.net/viralpatel/BNrKn/

使用jquery更改“n”行的可见性

2 个答案: