为HTML大型表格添加批量展开/折叠功能（默认显示前N行）的实现方案问询

这里有个超简单的原生JS+CSS方案，完全符合你要的「默认显示前N行，批量展开/折叠剩余行」的需求，不用依赖任何框架，直接基于你的现有代码修改即可：

实现思路 #

1. 给表格里超过指定行数的行添加隐藏类，默认不显示
2. 在表格的tbody里插入一行包含展开/折叠按钮的行（仅当总行数超过指定数量时才显示）
3. 通过按钮点击事件切换隐藏行的显示状态，同时更新按钮文本

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
<style>
th {
border: 1px solid black;
border-bottom: 3px solid black;
text-align: center;
color: #121111;
background-color: #59ebbd;
position: sticky;
top: 0;
}
td {
border: 1px solid grey;
padding: 2px;
}
table {
border-collapse: collapse;
table-layout: fixed;
white-space: nowrap;
}
/* 隐藏行的样式 */
.hidden-row {
    display: none;
}
/* 按钮行的单元格样式，让按钮居中显示 */
.toggle-row td {
    text-align: center;
    border: none;
    padding: 5px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<table border="0" class="df data">
<thead>
<tr>
<th>Date</th>
<th>count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>3 </td>
</tr>
<tr>
<td>6</td>
<td>3</td>
</tr>
<tr>
<td>60</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>

<script>
// 配置：默认显示的行数
const SHOW_ROWS = 5;

document.addEventListener('DOMContentLoaded', function() {
    const tbody = document.querySelector('.df.data tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    // 如果总行数 <= 显示行数，不需要按钮
    if (rows.length <= SHOW_ROWS) return;
    
    // 给超过显示行数的行添加隐藏类
    const hiddenRows = rows.slice(SHOW_ROWS);
    hiddenRows.forEach(row => row.classList.add('hidden-row'));
    
    // 创建展开/折叠按钮行
    const toggleRow = document.createElement('tr');
    toggleRow.classList.add('toggle-row');
    const toggleCell = document.createElement('td');
    toggleCell.colSpan = 2; // 跨两列，匹配表格列数
    const toggleBtn = document.createElement('button');
    toggleBtn.textContent = '展开更多';
    toggleCell.appendChild(toggleBtn);
    toggleRow.appendChild(toggleCell);
    
    // 把按钮行插入到第SHOW_ROWS行之后
    tbody.insertBefore(toggleRow, hiddenRows[0]);
    
    // 按钮点击事件
    toggleBtn.addEventListener('click', function() {
        const isHidden = hiddenRows[0].classList.contains('hidden-row');
        // 批量切换所有隐藏行的显示状态
        hiddenRows.forEach(row => row.classList.toggle('hidden-row'));
        // 更新按钮文本
        toggleBtn.textContent = isHidden ? '收起' : '展开更多';
    });
});
</script>
</body>
</html>

关键部分说明 #

• CSS部分：新增了.hidden-row类实现行隐藏，.toggle-row类优化按钮行的显示效果，让按钮居中且无多余边框，更贴合表格风格。
• JS部分：
  1. 用DOMContentLoaded确保DOM加载完成后再执行操作，避免找不到元素的问题
  2. 先判断总行数，若未超过指定行数则直接跳过后续逻辑，不用显示按钮
  3. 通过slice(SHOW_ROWS)快速筛选出需要隐藏的行，批量添加隐藏类
  4. 动态创建按钮行并插入到指定位置，保证按钮出现在前N行之后
  5. 点击按钮时，通过classList.toggle批量切换所有隐藏行的状态，同时更新按钮文本，交互逻辑清晰

这个方案完全满足你的需求：默认只显示前5行，点击按钮可批量展开所有剩余行，再次点击又能批量收起，代码简洁无冗余，没有额外依赖。

内容的提问来源于stack exchange，提问作者Piotrek Leśniak