使用单个按钮动态切换表格行显示与隐藏的专业指南

// 初始隐藏
document.getElementById('4').style.display = 'none';
// ... 更多行

function hide() {
    document.getElementById('4').style.display = 'none';
    // ... 更多行
}

function show() {
    document.getElementById('4').style.display = '';
    // ... 更多行
}

<!-- 确保页面已引入jQuery库，例如： -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->

<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
    <thead>
        <tr>
            <th><strong>楼层平面图</strong></th>
            <th><strong>尺寸</strong></th>
            <th><strong>价格</strong></th>
        </tr>
    </thead>
    <tbody>
        <!-- 以下为通过PHP或其他后端语言动态生成的表格行 -->
        <!-- 示例：假设有10行数据 -->
        <tr class="floor-plan-row"><td>平面图 1</td><td>尺寸 1</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 2</td><td>尺寸 2</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 3</td><td>尺寸 3</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 4</td><td>尺寸 4</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 5</td><td>尺寸 5</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 6</td><td>尺寸 6</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 7</td><td>尺寸 7</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 8</td><td>尺寸 8</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 9</td><td>尺寸 9</td><td><button class="btn btn-primary">获取报价</button></td></tr>
        <tr class="floor-plan-row"><td>平面图 10</td><td>尺寸 10</td><td><button class="btn btn-primary">获取报价</button></td></tr>
    </tbody>
</table>
<br>
<div class="wrapperr">
    <button class="btn btn-primary" id="toggleRowsButton">显示更多 <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
</div>

<script>
    // 确保在DOM加载完成后执行JavaScript
    $(document).ready(function() {
        // 初始状态：隐藏除前三行外的所有行
        // tr:gt(2) 意味着选择索引大于2的<tr>元素，即第4行（索引3）及以后的所有行。
        // 如果表格可能为空或行数不足3行，此操作不会报错。
        $("table.tablec tbody tr:gt(2)").hide();

        // 定义一个变量来跟踪当前状态：false表示只显示部分，true表示显示全部
        var shownAllRows = false;

        // 为按钮绑定点击事件
        $("#toggleRowsButton").on("click", function() {
            var button = $(this); // 获取当前点击的按钮
            if (shownAllRows) {
                // 如果当前显示了所有行，则隐藏超出前三行的部分
                $("table.tablec tbody tr:gt(2)").hide();
                button.html('显示更多 <i class="fa fa-arrow-down" style="font-size:14px"></i>');
                shownAllRows = false; // 更新状态为只显示部分
            } else {
                // 如果当前只显示了部分行，则显示所有行
                $("table.tablec tbody tr:gt(2)").show();
                button.html('显示更少 <i class="fa fa-arrow-up" style="font-size:14px"></i>');
                shownAllRows = true; // 更新状态为显示全部
            }
        });
    });
</script>