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

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 获取此信息。示例代码在这里。 提前致谢。

Answer 1

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

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();
});​

小提琴

Answer 2

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

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

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

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

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