1. 问题背景与传统方法的局限性
在网页开发中，尤其是在展示大量数据时，为了避免页面过长或信息过载，通常需要对表格内容进行折叠。一个常见的需求是，默认只显示表格的前几行，然后提供一个按钮让用户选择“显示更多”或“显示更少”。
原始的实现方式，如通过 document.getElementById('ID').style.display = 'none' 逐个隐藏或显示行，存在以下显著问题：
- 维护性差： 当表格行数发生变化时，需要手动修改JavaScript代码中的每个ID，工作量大且容易出错。
- 可伸缩性差： 对于行数不确定的动态表格，这种方法几乎无法实现。
- 代码冗余： 大量的重复代码使得脚本显得臃肿。
为了克服这些局限性，我们需要一种更智能、更具动态性的解决方案。
2. 核心思路：利用jQuery选择器和状态管理
优化的解决方案将利用jQuery库的强大功能，特别是其选择器和DOM操作方法。核心思想如下：
- 统一选择器： 使用jQuery选择器（如:gt()）来批量选中需要隐藏/显示的表格行，而不是逐个通过ID操作。
- 状态管理： 使用一个布尔变量来跟踪当前表格是处于“显示全部”状态还是“显示部分”状态。
- 单个切换函数： 将“显示更多”和“显示更少”的逻辑封装在一个函数中，根据当前状态执行相应的操作并更新按钮文本。
3. 实现步骤
3.1 引入jQuery库
首先，确保您的项目中已经引入了jQuery库。如果尚未引入，可以在HTML文件的
或标签结束前添加以下CDN链接：3.2 HTML结构调整
保持表格的PHP动态生成部分不变，主要修改按钮部分。将两个独立的“Show All”和“Show Less”按钮合并为一个，并添加一个通用的点击事件处理函数。
| Floor Plan | Dimension | Price |
|---|---|---|
| @@##@@" alt="" width="100" height="100" title=""> |
Sqft |
注意： PHP生成表格时，确保
内的
3.3 JavaScript/jQuery 实现
在HTML的
结束标签前，或者在中（确保在DOM加载完成后执行），添加以下JavaScript代码。代码解释：
- jQuery(document).ready(function($) { ... });：确保在文档对象模型（DOM）完全加载和解析后执行代码，避免操作尚未存在的元素。
- var shown = false;：一个布尔变量，用于记录表格当前是处于“显示所有” (true) 还是“显示部分” (false) 的状态。初始值为 false。
- var defaultVisibleRows = 3;：定义默认显示的前3行。
- $("table.tablec tbody tr:gt(" + (defaultVisibleRows - 1) + ")").hide();：在页面加载时执行。
- $("table.tablec tbody tr")：选择 class 为 tablec 的表格中 内的所有
元素。 - :gt(index)：这是一个jQuery选择器，表示选择索引大于 index 的所有元素。由于索引是从0开始的，gt(2) 实际上会选择第4行（索引为3）及以后的所有行。因此，为了隐藏第 defaultVisibleRows 行（例如第4行）及之后的所有行，我们需要使用 gt(defaultVisibleRows - 1)。
- .hide()：隐藏选中的元素。
- $('.wrapperr button').html(...)：初始化按钮文本为“Show More”。
- window.toggleTableRows = function(e) { ... };：定义切换函数。
- e.target：获取触发事件的DOM元素（即按钮本身）。
- $(e.target).html(...)：使用jQuery修改按钮的HTML内容，包括文本和图标。
- shown = !shown;：每次点击后反转 shown 变量的状态。
4. 注意事项与最佳实践
- jQuery依赖： 确保您的页面已正确加载jQuery库。如果您的WordPress站点使用了jQuery，通常它会自动加载。
-
CSS初始隐藏： 另一种在页面加载时隐藏额外行的方法是使用CSS。例如：
.tablec tbody tr:nth-child(n+4) { /* 从第4个子元素开始隐藏 */ display: none; }但请注意，如果使用CSS进行初始隐藏，JavaScript的 .show() 方法可能需要与 display: table-row 结合使用，以确保正确的显示行为，或者直接依赖jQuery的 hide()/show() 方法来管理 display 属性。本教程中的jQuery方法已经包含了初始隐藏。
- 可访问性： 对于更高级的交互，可以考虑添加ARIA属性（如 aria-expanded 和 aria-controls）来增强屏幕阅读器用户的体验。
- 性能： 对于极大规模（数千行以上）的表格，虽然jQuery选择器效率很高，但频繁地显示/隐藏大量DOM元素仍可能影响性能。在这种极端情况下，可能需要考虑虚拟滚动或分页等更复杂的解决方案。然而，对于大多数常见场景，本教程的方法已足够高效。
- 通用性： defaultVisibleRows 变量使得您可以轻松修改默认显示的行数，提高了代码的灵活性。
5. 总结
通过采用jQuery的选择器（如:gt()）和状态管理机制，我们成功地将动态表格行的显示/隐藏功能集成到一个简洁、高效的单个按钮中。这种方法不仅解决了传统手动DOM操作带来的维护性和可伸缩性问题，还大大提升了代码的清晰度和用户体验。这是一种在Web开发中处理动态内容显示和交互的推荐实践。
- $("table.tablec tbody tr")：选择 class 为 tablec 的表格中 内的所有
