如何使用jquery显示有限记录而不是所有记录

时间:2018-02-27 18:15:02

标签: javascript jquery

在我的iframe中我有很多记录,但我的要求是只显示4条记录。 我将提供一个“全部显示”链接,一旦点击显示所有链接,我们必须在另一个标签中显示所有记录。

1 个答案:

答案 0 :(得分:0)

我在这里添加了一个带表的示例代码,希望它能帮到你。

HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Carol</td>
      </tr>
    </tbody>
  </table>
  <button class="show-all">Show all</button>
  <button class="show-default">Show default</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $("table > tbody > tr").hide().slice(0, 2).show();
    $(".show-all").on("click", function() {
      $("tbody > tr", $(this).prev()).show();
    });
    $(".show-default").on("click", function() {
      $("table > tbody > tr").hide().slice(0, 2).show();
    });
  </script>
</body>
</html>