javascript - Show only a limited number of rows in a table -

javascript - Show only a limited number of rows in a table -

i trying limit number of rows displayed in <table>. need show 2 rows out of whatever number of records fetched. there's little button @ end of table, on click of rest of records revealed.

here's sample screenshot of how table like.

i have tried searching on , other websites, unable through. can't utilize jquery plugin table either.

how can accomplish using jquery/javascript?

select tr elements tbody , utilize slice method select range of them:

$("table > tbody > tr").hide().slice(0, 2).show();

demo:

class="snippet-code-js lang-js prettyprint-override">$("table > tbody > tr").hide().slice(0, 2).show(); $(".show-all").on("click", function() { $("tbody > tr", $(this).prev()).show(); }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>1</td> <td>alice</td> </tr> <tr> <td>2</td> <td>bob</td> </tr> <tr> <td>3</td> <td>carol</td> </tr> </tbody> </table> <button class="show-all">show all</button>

.slice( start [, end ] )

reduce set of matched elements subset specified range of indices.

start

type: integer

an integer indicating 0-based position @ elements begin selected. if negative, indicates offset end of set.

end

type: integer

an integer indicating 0-based position @ elements stop beingness selected. if negative, indicates offset end of set. if omitted, range continues until end of set.

javascript jquery