使用 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>

代码解释：

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

注意事项：

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

单次分段显示

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

Vondy

下一代AI应用平台，汇集了一流的工具/应用程序

下载

$.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()。

• setTimeout(function() { ... }, 2000): 在 2 秒后执行一次匿名函数，该函数调用 $('tbody').slide()，从而实现单次显示/隐藏的效果。

总结：

• setInterval() 用于循环执行某个操作，可以实现表格行的循环分段显示。
• setTimeout() 用于在指定时间后执行某个操作，可以实现表格行的单次分段显示。

选择哪种方式取决于你的具体需求。 如果需要表格内容一直循环切换显示，则使用 setInterval()。如果只需要表格内容切换显示一次，则使用 setTimeout()。