在网页开发中，尤其是在处理如wordpress这类cms系统中的动态数据时，我们经常会遇到需要展示大量表格数据的情况。为了保持页面整洁和提升用户体验，一个常见的需求是默认只显示表格的前几行，然后提供一个“显示更多”按钮，点击后展开所有行；再次点击该按钮，则变为“显示更少”，将表格恢复到初始状态。
传统的实现方式可能涉及手动获取每个需要隐藏的DOM元素ID，并分别设置其display属性。这种方法在表格行数固定且较少时尚可接受，但一旦表格数据是动态生成，行数不确定，或者需要频繁修改隐藏逻辑时，这种硬编码的方式就会变得极其低效、难以维护且容易出错。它不仅增加了开发者的负担，也可能因为频繁的DOM操作而影响页面性能。
让我们首先审视一种常见的、但效率低下的JavaScript实现方式。这种方法通常通过直接操作每个元素的id来控制其显示状态。
原始HTML结构（部分）:
<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
<thead>
<tr>
<th><strong>Floor Plan</strong></th>
<th><strong>Dimension</strong></th>
<th><strong>Price</strong></th>
</tr>
</thead>
<tbody>
<?php
// 假设这里是PHP循环生成表格行
$i = 0; // 假设i从0或1开始计数
foreach( $floor_plans as $plans ) { $i++; ?>
<tr id="<?php echo $i;?>" class="<?php echo $i;?>">
<!-- 行内容 -->
</tr>
<?php } ?>
</tbody>
</table>
<br>
<div class="wrapperr">
<!-- 两个独立的按钮 -->
<button class="btn btn-primary" onclick="show()">Show All <i class="fa fa-arrow-down"></i></button>
<button class="btn btn-primary" onclick="hide()">Show Less <i class="fa fa-arrow-up"></i></button>
</div>原始JavaScript代码：
<script>
// 初始隐藏：硬编码每个ID
document.getElementById('4').style.display = 'none';
document.getElementById('5').style.display = 'none';
// ...以此类推，直到document.getElementById('20').style.display = 'none';
function hide() {
// 隐藏逻辑：再次硬编码每个ID
document.getElementById('4').style.display = 'none';
document.getElementById('5').style.display = 'none';
// ...
}
function show() {
// 显示逻辑：再次硬编码每个ID
var a = document.getElementById("4");
// ...
a.style.display = ""; // 或 'table-row'
// ...
}
</script>这种实现存在的核心问题：
为了解决上述问题，我们可以采用jQuery库，利用其强大的选择器功能和简洁的DOM操作API，实现一个高效且易于维护的单按钮切换方案。
核心思想：
首先，确保你的页面中已经正确引入了jQuery库。如果是在WordPress环境中，通常jQuery已经默认加载，但为了避免冲突，建议使用jQuery而不是$作为别名。
<!-- 在</head>标签前或</body>标签前引入jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
将原有的两个按钮合并为一个，并为其添加一个通用的ID或类名，以便于JavaScript（或jQuery）进行事件绑定。
<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
<thead>
<tr>
<th><strong>Floor Plan</strong></th>
<th><strong>Dimension</strong></th>
<th><strong>Price</strong></th>
</tr>
</thead>
<tbody>
<?php
// PHP循环生成表格行保持不变
// 确保表格行有父元素，或者直接是tbody的子元素
$i = 0;
foreach( $floor_plans as $plans ) { $i++; ?>
<tr id="floor-plan-row-<?php echo $i;?>"> <!-- 建议使用更具语义的ID前缀 -->
<!-- 行内容 -->
</tr>
<?php } ?>
</tbody>
</table>
<br>
<div class="wrapperr">
<!-- 单一切换按钮 -->
<button class="btn btn-primary" id="toggleTableRowsButton">Show More <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
</div>我们将使用$(document).ready()确保DOM加载完成后再执行脚本，并定义一个shown变量来管理状态。
<script>
jQuery(document).ready(function($) {
// 初始状态：只显示前3行，隐藏从第4行开始的所有行
// :gt(N) 选择器会选择索引大于 N 的元素。
// 如果我们想隐藏从第4行开始的行（即索引为3, 4, 5...的行），
// 那么应该使用 :gt(2)。
$('table.tablec tbody tr:gt(2)').hide();
var shown = false; // 初始状态为“未显示全部”
// 绑定点击事件到切换按钮
$('#toggleTableRowsButton').on('click', function() {
if (shown) {
// 当前是“显示全部”状态，点击后应该“显示更少”
$('table.tablec tbody tr:gt(2)').hide(); // 隐藏从第4行开始的行
$(this).html('Show More <i class="fa fa-arrow-down" style="font-size:14px"></i>');
shown = false;
} else {
// 当前是“显示部分”状态，点击后应该“显示全部”
$('table.tablec tbody tr:gt(2)').show(); // 显示从第4行开始的行
$(this).html('Show Less <i class="fa fa-arrow-up" style="font-size:14px"></i>');
shown = true;
}
});
});
</script>代码解释：
以上就是优化动态表格行显示与隐藏：单按钮切换方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
822
收藏
取消收藏
