动态表格行显示/隐藏切换教程：使用单个按钮优化用户体验

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

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

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