如何实现HTML表格多行单元格的点击折叠与展开功能？

下面是嵌入JavaScript后的完整HTML代码，可实现点击单元格在多行/单行状态间切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        /* 可选：添加鼠标指针样式，提示单元格可点击 */
        .collapsible-cell {
            cursor: pointer;
        }
    </style>
</head>

<body>
<table>
    <tr>
        <th>Collapse</th>
    </tr>
    <tr>
        <!-- 给单元格添加标识类和状态记录属性 -->
        <td class="collapsible-cell" data-expanded="true">
            first line<br>
            second line<br>
            third line<br>
            fourth line<br>
        </td>
    </tr>
</table>

<script>
// 获取所有带折叠功能的单元格
const collapsibleCells = document.querySelectorAll('.collapsible-cell');

collapsibleCells.forEach(cell => {
    // 提前保存单元格的原始完整内容
    const originalContent = cell.innerHTML;
    
    cell.addEventListener('click', () => {
        const isExpanded = cell.dataset.expanded === 'true';
        
        if (isExpanded) {
            // 折叠：仅保留第一行内容
            const firstLine = originalContent.split('<br>')[0] + '<br>';
            cell.innerHTML = firstLine;
            cell.dataset.expanded = 'false';
        } else {
            // 展开：恢复原始内容
            cell.innerHTML = originalContent;
            cell.dataset.expanded = 'true';
        }
    });
});
</script>
</body>
</html>

代码说明： #

• 样式优化：.collapsible-cell的cursor: pointer是可选配置，用于提示用户该单元格可交互，可根据需求调整或移除。
• HTML标记：通过collapsible-cell类标记需要折叠功能的单元格，data-expanded属性记录当前状态（初始true表示默认展开）。
• JS逻辑：
  1. 提前缓存单元格原始内容，避免重复解析DOM。
  2. 点击时根据data-expanded值判断状态：折叠时提取第一行内容替换单元格HTML，展开时恢复原始内容。
  3. 更新data-expanded属性同步当前状态。

如果需要给多个单元格添加该功能，只需给对应<td>标签加上collapsible-cell类即可，脚本会自动处理所有目标单元格。

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