How to show 5 additional rows in a table each time using jQuery? -

I have a table with 30 rows What I would like to do is display the top 5 rows by default and then show 5 more if Click on "Show More 5".

then displays only 5 from the default, once the "Show 5 more" is clicked, 5 more appear, now the user sees 10 rows, click "Show more 5" Now you can see 15 rows. So and the fourth.

How can I do this? Is there a jQuery plugin for this?

first method: addend () function

HTML

  & lt; Table class = "table" & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Th & gt; # & Lt; / Th & gt; & Lt; Th & gt; First name & lt; / Th & gt; & Lt; Th & gt; Last name & lt; / Th & gt; & Lt; Th & gt; Username & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; Tr class = "template" & gt; & Lt; Td square = "number" & gt; 5 & ​​lt; / Td> & Lt; TD & gt; Larry & lt; / TD & gt; & Lt; Td> Bird & lt; / Td> & Lt; TD & gt; @twitter & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 1 & lt; / TD & gt; & Lt; TD & gt; Mark & ​​lt; / TD & gt; & Lt; TD & gt; Otto & lt; / TD & gt; & Lt; TD & gt; @ MDO & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; Yakub & lt; / TD & gt; & Lt; TD & gt; Thornton & lt; / TD & gt; & Lt; TD & gt; @ Fat & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 3 & lt; / TD & gt; & Lt; TD & gt; Larry & lt; / TD & gt; & Lt; Td> Bird & lt; / Td> & Lt; TD & gt; @twitter & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 4 & lt; / TD & gt; & Lt; TD & gt; Larry & lt; / TD & gt; & Lt; Td> Bird & lt; / Td> & Lt; TD & gt; @twitter & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 5 & ​​lt; / TD & gt; & Lt; TD & gt; Larry & lt; / TD & gt; & Lt; Td> Bird & lt; / Td> & Lt; TD & gt; @twitter & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; Button class = "btn" & gt; Show more & lt; / Button & gt;   
  Javascript   
  // The number of rows that were originally viewed var n = 5; Click on "Show more" button $ (".btn"). ("Click", function () {// How many rows you want to add? Var howMany = 1; // If you use it then call the azax and go to the following // code agax callback / add rows for ( Var i = 0; i & lt; howMany; ++ i) {appendItem ();}}); Function append item () {// clone item var items = $ ("template"). Clone () RemoveClass ("Template"); // Set your data items. Address ("number.") Text (++ n); // Attach it to $ ("dune"). Attachment (item); }   
  
 Second way:  fadeIn () / show ()  functions  
  HTML   
  & lt; Table class = "table" & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Th & gt; # & Lt; / Th & gt; & Lt; Th & gt; First name & lt; / Th & gt; & Lt; Th & gt; Last name & lt; / Th & gt; & Lt; Th & gt; Username & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; Tr class = "template" & gt; & Lt; Td square = "number" & gt; 5 & ​​lt; / Td> & Lt; TD & gt; Larry & lt; / TD & gt; & Lt; Td> Bird & lt; / Td> & Lt; TD & gt; @twitter & lt; / TD & gt; & Lt; / TR & gt; & Lt ;! - HTML is generated by JQUERY - & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; Button class = "btn" & gt; Show more & lt; / Button & gt;   
  JavaScript   
  // ================= generated Dummy Table var n = 0; Var TOTAL_ROWS = 30; {AppendItem () for (Var i = 0; i & lt; TOTAL_ROWS; ++ i); } Function appendItem () {var items = $ ("template"). Clone () RemoveClass ("Template"); Item.find ("number.") Text (++ n). Item.addClass ("Table Item"); Item.hide (); $ ("Tbody") enclosed (item). } // ================= How to show only a few lines by default = how; = 5; ShowDefaultRows (); Function showDefaultRows () {var full = 0; $ ("Table-item"). Each (function () {if (++ full> gt;) {return;} $ (this) .show ();}); } // Click ================ Click on $ (".btn"). ("Click", function () {var full = 0; var showMore = 5; how (++ full & gt; how many) {return;} $ (this) .fadeIn ();});});