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

Question

我有一張有30行的桌子。 我想做的是默認顯示前5行，如果使用時單擊“顯示5個以上”，則顯示5個以上的行。

因此，默認情況下，一旦單擊“顯示5個更多”，則僅顯示5個，然后再顯示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>

Java腳本

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

Java腳本

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