如何在HTML中实现可折叠表格行？现有代码功能修改求助

我帮你调整了代码，添加了交互逻辑和结构优化，刚好能实现你要的点击+/-切换行折叠展开的效果，下面是完整的修改方案：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="gwt:property" content="locale=en_US">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        tr.even { background-color: #FFFFFF; }
        tr.odd { background-color: #EEEEEE; }
        /* 折叠行默认隐藏 */
        .collapse-row {
            display: none;
        }
        /* 让表格边框更规整 */
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
        }
        /* 给切换按钮添加可点击的视觉提示 */
        .toggle-btn {
            cursor: pointer;
            user-select: none;
            margin-right: 4px;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td width="5%"></td>
                <td>
                    <table border="1" cellpadding="5" cellspacing="0">
                        <thead>
                            <tr style="font-size:16px; background-color:lightgray;">
                                <th><a name="table">&nbsp;</a>Column1</th>
                                <th>Column2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 触发折叠的主行 -->
                            <tr class="odd">
                                <td><span class="toggle-btn">+</span> Country</td>
                                <td>India</td>
                            </tr>
                            <!-- 需要折叠的子行，默认隐藏 -->
                            <tr class="collapse-row odd">
                                <td>&nbsp;</td>
                                <td>Europe</td>
                            </tr>
                            <tr class="collapse-row even">
                                <td>&nbsp;</td>
                                <td>Asia</td>
                            </tr>
                            <tr class="collapse-row odd">
                                <td>&nbsp;</td>
                                <td>Russia</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td width="5%"></td>
            </tr>
        </tbody>
    </table>

    <script>
        // 获取所有切换按钮
        const toggleButtons = document.querySelectorAll('.toggle-btn');
        
        toggleButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                // 切换按钮的+/-文本
                this.textContent = this.textContent === '+' ? '-' : '+';
                
                // 获取当前按钮所在的行，找到后续的折叠行
                let currentRow = this.closest('tr');
                let nextRow = currentRow.nextElementSibling;
                
                // 遍历所有后续的折叠行，切换显示状态
                while (nextRow && nextRow.classList.contains('collapse-row')) {
                    nextRow.style.display = nextRow.style.display === 'none' ? 'table-row' : 'none';
                    nextRow = nextRow.nextElementSibling;
                }
            });
        });
    </script>
</body>
</html>

关键改动说明 #

1. HTML结构调整：

   • 把原本挤在同一个单元格里的多个国家拆成了单独的行，标记为.collapse-row，默认隐藏
   • 把+符号单独封装在<span class="toggle-btn">里，方便绑定点击事件，也能优化交互体验

2. CSS样式补充：

   • 给.collapse-row设置默认隐藏的样式
   • 给切换按钮添加光标样式，让用户一眼就知道这是可点击的元素
   • 优化表格边框样式，让整体视觉更规整

3. JavaScript交互逻辑：

   • 给所有切换按钮绑定点击事件
   • 点击时自动切换按钮的+/-文本
   • 遍历当前行之后的所有折叠行，切换它们的显示/隐藏状态

这样就能完美实现你要的效果：默认显示带+的主行，点击+展开所有子行，符号变为-；点击-则折叠子行，符号变回+。

内容的提问来源于stack exchange，提问作者Deepika Bansal