如何在每次使用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