-1

I have the table like below with "n" numbers of rows.

    <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>

Initially on page load, I want to show only two rows. And if i click "more" link, i just want to visible or show 3 more rows for every click.

How to get this with jquery. Example code here. Thanks in advance.

4

2 に答える 2

2

最初の2つのtr以外のすべてをcssで非表示にすることから始めます。

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

次に、最後に表示されたtrのインデックスを取得し、次の3つなどを表示します。

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

フィドル

于 2012-12-17T13:09:25.733 に答える
0

You can hide remaining <tr> using CSS3 nth-child selector: 

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

And then use JQuery on click of Show more link to show them:

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

Example: http://jsfiddle.net/viralpatel/BNrKn/

于 2012-12-17T12:59:07.043 に答える