使用 jQuery 实现表格分段显示效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-16

浏览次数：次

返回列表

使用 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'): 选择所有隐藏的子元素（）。
kidsNotHidden = self.children().filter(':not(:hidden)'): 选择所有未隐藏的子元素（）。
kidsHidden.fadeIn(): 使用 fadeIn() 方法显示隐藏的行。
kidsNotHidden.fadeOut(): 使用 fadeOut() 方法隐藏显示的行。
setInterval(function() { ... }, 2000): 每隔 2 秒执行一次匿名函数，该函数调用 $('tbody').slide()，从而实现循环显示/隐藏的效果。

注意事项：

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

单次分段显示

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

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

查看详情

$.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>