如何在每次使用jQuery時在表中顯示5個附加行？

Question

我有一個30行的表。我想要做的是按默認顯示前5行，如果點擊「顯示5更多」，則再顯示5行。

所以默認情況下只顯示5個「Show 5 More」，然後再顯示5個，現在用戶看到10行。點擊「顯示5更多」，然後你可以看到15行。等等，第四。

我該怎麼做？有沒有這個jQuery插件？

Answer 1

第一種方法：使用append()功能

HTML

<table class="table"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Username</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="template"> 
     <td class="num">5</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Jacob</td> 
     <td>Thornton</td> 
     <td>@fat</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
     <tr> 
     <td>4</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
    </tbody> 
</table> 

<button class="btn">Show more</button> 

的Javascript

// number of rows seen by default 
var n = 5; 

// click on the "Show more" button 
$(".btn").on("click", function() { 
    // how many rows to add? 
    var howMany = 1; 

    // call ajax, if you use it and the following 
    // code will go to ajax callback   

    // add rows 
    for (var i = 0; i < howMany; ++i) { 
     appendItem(); 
    } 
}); 

function appendItem() { 
    // clone item 
    var item = $(".template").clone().removeClass("template"); 
    // set its data 
    item.find(".num").text(++n); 
    // append it 
    $("tbody").append(item); 
} 

JSFIDDLE

方法二：使用fadeIn()/show()功能

HTML

<table class="table"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Username</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="template"> 
     <td class="num">5</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
    <!-- THE HTML IS GENERATED BY JQUERY --> 
    </tbody> 
</table> 

<button class="btn">Show more</button> 

的Javascript

// ================= GENERATE DUMMY TABLE 
var n = 0; 
var TOTAL_ROWS = 30; 
for (var i = 0; i < TOTAL_ROWS; ++i) { 
    appendItem(); 
} 


function appendItem() { 
    var item = $(".template").clone().removeClass("template"); 
    item.find(".num").text(++n); 
    item.addClass("table-item"); 
    item.hide(); 
    $("tbody").append(item); 
} 

// ================= SHOW ONLY FEW ROWS BY DEFAULT 

var howMany = 5; 
showDefaultRows(); 

function showDefaultRows() { 
    var complete = 0; 

    $(".table-item").each(function() { 

     if (++complete > howMany) { 
      return; 
     } 
     $(this).show(); 
    }); 
} 

// ================= ON CLICK 

$(".btn").on("click", function() { 

    var complete = 0; 
    var showMore = 5; 
    howMany += showMore; 
    $(".table-item").each(function() { 
     if (++complete > howMany) { 
      return; 
     } 

     $(this).fadeIn(); 
    }); 
}); 

JSFIDDLE