使用 jQuery 实现表格分段显示效果-html教程-PHP中文网

使用 jQuery 实现表格分段显示效果

花韻仙語

发布： 2025-11-16 09:47:12

原创

175人浏览过

使用 jquery 实现表格分段显示效果

本文将介绍如何使用 jQuery 实现表格内容的分段显示效果，即先显示表格的一部分行，然后隐藏已显示的行，再显示剩余的行。我们将通过自定义 jQuery 插件，结合 fadeIn() 和 fadeOut() 方法，以及 setInterval() 或 setTimeout() 函数，实现这一功能。通过学习本文，你将掌握表格分段显示的两种实现方式，并了解它们之间的区别和适用场景。

实现原理

核心思路是使用 jQuery 选择器找到需要操作的表格行，然后利用 fadeIn() 和 fadeOut() 方法控制行的显示和隐藏。为了实现分段显示，我们需要区分当前可见的行和隐藏的行。使用 setInterval() 可以实现循环显示，而 setTimeout() 则只执行一次显示。

循环分段显示

以下代码展示了如何使用 setInterval() 实现表格行的循环分段显示。

$.fn.slide = function() {
  var self = this,
    kidsHidden = self.children().filter(':hidden'),
    kidsNotHidden = self.children().filter(':not(:hidden)');
  kidsHidden.fadeIn();
  kidsNotHidden.fadeOut();
};

$(function() {
  setInterval(function() {
    $('tbody').slide()
  }, 2000);
})

登录后复制

HTML 结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr hidden>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr hidden>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

登录后复制

代码解释：

$.fn.slide = function() { ... }: 定义了一个 jQuery 插件 slide，用于操作 tbody 中的行。
var self = this: 保存当前 tbody 的引用。
kidsHidden = self.children().filter(':hidden'): 选择所有隐藏的子元素（<tr>）。
kidsNotHidden = self.children().filter(':not(:hidden)'): 选择所有未隐藏的子元素（<tr>）。
kidsHidden.fadeIn(): 使用 fadeIn() 方法显示隐藏的行。
kidsNotHidden.fadeOut(): 使用 fadeOut() 方法隐藏显示的行。
setInterval(function() { ... }, 2000): 每隔 2 秒执行一次匿名函数，该函数调用 $('tbody').slide()，从而实现循环显示/隐藏的效果。

注意事项：

确保引入 jQuery 库。
在 HTML 中，初始时需要隐藏一部分行，通过添加 hidden 属性实现。

单次分段显示

以下代码展示了如何使用 setTimeout() 实现表格行的单次分段显示。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

$.fn.slide = function() {
  var self = this,
    kidsHidden = self.children().filter(':hidden'),
    kidsNotHidden = self.children().filter(':not(:hidden)');
  kidsHidden.fadeIn();
  kidsNotHidden.fadeOut();
};

$(function() {
  setTimeout(function() {
    $('tbody').slide()
  }, 2000);
})

登录后复制

HTML 结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr hidden>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr hidden>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

登录后复制

代码解释：

这段代码与循环显示的代码非常相似，唯一的区别在于使用了 setTimeout() 而不是 setInterval()。