一键切换表格行显示隐藏教程

大家好，今天本人给大家带来文章《一键切换表格行显示隐藏，提升用户体验教程》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

本教程旨在解决动态生成表格中，如何高效地实现表格行（超出指定数量）的默认隐藏与通过单个按钮进行“显示更多”和“显示更少”的切换功能。我们将摒弃低效的手动DOM操作，转而采用jQuery的强大选择器和DOM操作方法，以提供一个更简洁、可维护且高性能的解决方案，显著提升用户体验。

1. 问题背景与传统方法的局限性

在网页开发中，尤其是在展示大量数据时，为了避免页面过长或信息过载，通常需要对表格内容进行折叠。一个常见的需求是，默认只显示表格的前几行，然后提供一个按钮让用户选择“显示更多”或“显示更少”。

原始的实现方式，如通过 document.getElementById('ID').style.display = 'none' 逐个隐藏或显示行，存在以下显著问题：

• 维护性差： 当表格行数发生变化时，需要手动修改JavaScript代码中的每个ID，工作量大且容易出错。
• 可伸缩性差： 对于行数不确定的动态表格，这种方法几乎无法实现。
• 代码冗余： 大量的重复代码使得脚本显得臃肿。

为了克服这些局限性，我们需要一种更智能、更具动态性的解决方案。

2. 核心思路：利用jQuery选择器和状态管理

优化的解决方案将利用jQuery库的强大功能，特别是其选择器和DOM操作方法。核心思想如下：

1. 统一选择器： 使用jQuery选择器（如:gt()）来批量选中需要隐藏/显示的表格行，而不是逐个通过ID操作。
2. 状态管理： 使用一个布尔变量来跟踪当前表格是处于“显示全部”状态还是“显示部分”状态。
3. 单个切换函数： 将“显示更多”和“显示更少”的逻辑封装在一个函数中，根据当前状态执行相应的操作并更新按钮文本。

3. 实现步骤

3.1 引入jQuery库

首先，确保您的项目中已经引入了jQuery库。如果尚未引入，可以在HTML文件的或标签结束前添加以下CDN链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

3.2 HTML结构调整

保持表格的PHP动态生成部分不变，主要修改按钮部分。将两个独立的“Show All”和“Show Less”按钮合并为一个，并添加一个通用的点击事件处理函数。

<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 代码动态生成表格行，确保每行都有一个<tr>标签
        // 示例：
        $floor_plans = [
            ['fave_plan_title' => 'Plan A', 'fave_plan_image' => '#', 'fave_plan_description' => 'Description A', 'fave_plan_size' => '1000'],
            ['fave_plan_title' => 'Plan B', 'fave_plan_image' => '#', 'fave_plan_description' => 'Description B', 'fave_plan_size' => '1200'],
            ['fave_plan_title' => 'Plan C', 'fave_plan_image' => '#', 'fave_plan_description' => 'Description C', 'fave_plan_size' => '1500'],
            ['fave_plan_title' => 'Plan D', 'fave_plan_image' => '#', 'fave_plan_description' => 'Description D', 'fave_plan_size' => '1800'],
            ['fave_plan_title' => 'Plan E', 'fave_plan_image' => '#', 'fave_plan_description' => 'Description E', 'fave_plan_size' => '2000'],
            ['fave_plan_title' => 'Plan F', 'fave_plan_image' => '#', 'fave_plan_description' => 'Description F', 'fave_plan_size' => '2200'],
        ];
        $i = 0;
        foreach ($floor_plans as $plans) {
            $i++;
            ?>
            <tr id="<?php echo $i; ?>" class="<?php echo $i; ?>">
                <td>
                    <a href="<?php echo esc_url($plans['fave_plan_image']); ?>" data-lightbox="roadtrip">
                        <img class="borderr" src="<?php echo esc_url($plans['fave_plan_image']); ?>" alt="<?php echo $plans['fave_plan_description']; ?>" width="100" height="100" title="<?php echo $plans['fave_plan_description']; ?>">
                    </a>
                </td>
                <td>
                    <?php
                    // 假设 RemoveSpecialChar 和 get_the_title() 函数已定义
                    $str = ltrim(chop($plans['fave_plan_description'], "Floor Plan"), "Property Title");
                    $str1 = RemoveSpecialChar($str); // 假设 RemoveSpecialChar 函数已定义
                    echo $str1;
                    ?>
                    <br>
                    <b><?php echo esc_attr($plans['fave_plan_size']); ?> Sqft</b>
                </td>
                <td><button class="btn btn-primary">Get Quote</button></td>
            </tr>
        <?php } ?>
    </tbody>
</table>
<br>
<div class="wrapperr">
    <!-- 单个按钮，用于切换显示状态 -->
    <button class="btn btn-primary" onclick="toggleTableRows(event)">
        Show More <i class="fa fa-arrow-down" style="font-size:14px"></i>
    </button>
</div>

注意： PHP生成表格时，确保 内的 标签是直接子元素，以便jQuery选择器能够正确匹配。

3.3 JavaScript/jQuery 实现

在HTML的结束标签前，或者在中（确保在DOM加载完成后执行），添加以下JavaScript代码。

<script>
    // 确保DOM加载完成后执行
    jQuery(document).ready(function($) {
        var shown = false; // 跟踪当前状态：false表示只显示部分，true表示显示全部
        var defaultVisibleRows = 3; // 默认显示的行数

        // 页面加载时，默认隐藏超出指定数量的行
        // 注意：jQuery的:gt()选择器是0-indexed，所以:gt(defaultVisibleRows - 1)表示从第 defaultVisibleRows 行（索引为 defaultVisibleRows-1）之后的所有行
        $("table.tablec tbody tr:gt(" + (defaultVisibleRows - 1) + ")").hide();

        // 更新按钮文本为“Show More”
        $('.wrapperr button').html('Show More <i class="fa fa-arrow-down" style="font-size:14px"></i>');

        window.toggleTableRows = function(e) {
            if (shown) {
                // 当前是“显示全部”状态，点击后应“显示更少”
                $("table.tablec tbody tr:gt(" + (defaultVisibleRows - 1) + ")").hide();
                $(e.target).html('Show More <i class="fa fa-arrow-down" style="font-size:14px"></i>');
            } else {
                // 当前是“显示部分”状态，点击后应“显示全部”
                $("table.tablec tbody tr:gt(" + (defaultVisibleRows - 1) + ")").show();
                $(e.target).html('Show Less <i class="fa fa-arrow-up" style="font-size:14px"></i>');
            }
            shown = !shown; // 切换状态
        };
    });
</script>

代码解释：

• 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开发中处理动态内容显示和交互的推荐实践。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。