jquery - 每次使用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>

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