如何在Confluence页面实现基于单元格的动态可折叠表格行？

核心思路 #

利用Confluence支持的HTML宏注入原生CSS/JS，基于原生表格结构实现：

• 给可点击单元格标记自定义属性存储对应展开内容
• 点击单元格时动态生成/更新下方展开行的内容
• 用CSS控制展开行的显示隐藏状态

步骤1：调整表格结构（Confluence编辑模式下操作） #

编辑仪表盘表格，给需要触发展开的单元格添加data-expand-content属性，值为要展示的动态内容（支持简单HTML）。示例结构：

<table class="expandable-table">
  <thead>
    <tr>
      <th>数据库实例</th>
      <th>加载状态</th>
      <th>详情操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DB-Prod-01</td>
      <td data-expand-content="<p>CPU使用率: 45%<br>内存占用: 6.2G/8G<br>磁盘IO: 120MB/s</p>">正常</td>
      <td data-expand-content="<ul><li>最近备份: 2024-05-20 02:00</li><li>备份大小: 120GB</li><li>备份状态: 成功</li></ul>">查看备份详情</td>
    </tr>
    <tr>
      <td>DB-Test-01</td>
      <td data-expand-content="<p>CPU使用率: 12%<br>内存占用: 1.8G/4G<br>磁盘IO: 15MB/s</p>">正常</td>
      <td data-expand-content="<ul><li>最近备份: 2024-05-20 03:00</li><li>备份大小: 25GB</li><li>备份状态: 成功</li></ul>">查看备份详情</td>
    </tr>
  </tbody>
</table>

步骤2：添加CSS样式（通过HTML宏插入） #

/* 可点击单元格交互提示 */
.expandable-table td[data-expand-content] {
  cursor: pointer;
  color: #0052cc;
  text-decoration: underline;
}

/* 展开行基础样式 */
.expand-row {
  background-color: #f7f8f9;
  display: none;
}

.expand-row.active {
  display: table-row;
}

.expand-row td {
  padding: 12px;
  border-top: 1px solid #d3d3d3;
  column-span: all; /* 跨所有列显示内容 */
}

步骤3：添加JS逻辑（通过HTML宏插入） #

document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('.expandable-table');
  if (!table) return;

  table.addEventListener('click', function(e) {
    const targetCell = e.target.closest('td[data-expand-content]');
    if (!targetCell) return;

    const parentRow = targetCell.parentElement;
    let expandRow = parentRow.nextElementSibling;

    // 处理已有展开行的情况
    if (expandRow && expandRow.classList.contains('expand-row')) {
      const lastClicked = expandRow.dataset.lastClickedCell;
      // 同一单元格点击则切换显示状态
      if (lastClicked === targetCell.textContent.trim()) {
        expandRow.classList.toggle('active');
        return;
      }
      // 不同单元格点击则更新内容并显示
      expandRow.querySelector('td').innerHTML = targetCell.dataset.expandContent;
      expandRow.dataset.lastClickedCell = targetCell.textContent.trim();
      expandRow.classList.add('active');
    } else {
      // 创建新的展开行
      expandRow = document.createElement('tr');
      expandRow.classList.add('expand-row', 'active');
      expandRow.dataset.lastClickedCell = targetCell.textContent.trim();
      
      const expandCell = document.createElement('td');
      expandCell.innerHTML = targetCell.dataset.expandContent;
      expandRow.appendChild(expandCell);

      parentRow.insertAdjacentElement('afterend', expandRow);
    }

    // 可选：关闭其他行的展开状态
    document.querySelectorAll('.expand-row.active').forEach(row => {
      if (row !== expandRow) row.classList.remove('active');
    });
  });
});

Confluence注入说明 #

1. 进入页面编辑模式，插入「HTML」宏
2. 将表格代码、CSS（包裹在<style>标签）、JS（包裹在<script>标签）合并放入宏内
3. 保存页面即可生效

特性说明 #

• 点击不同单元格时，展开内容自动切换为对应单元格的data-expand-content值
• 支持同一行多次点击不同单元格更新内容
• 可选择是否关闭其他行的展开状态（代码中已预留逻辑）
• 完全基于原生技术，无需任何插件

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