点击表格行后如何在该行右侧显示面板？

实现思路 #

通过HTML构建表格与侧边面板结构，CSS控制面板的定位、显示/隐藏状态，JavaScript监听行点击事件，动态调整面板位置并填充内容，同时支持点击页面其他区域关闭面板。

1. HTML结构 #

表格行通过data-panel-content属性存储对应面板内容，搭配一个通用的侧边面板：

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr data-panel-content="张三的详细信息：从事前端开发5年，擅长Vue与React框架">
      <td>张三</td>
      <td>28</td>
      <td>前端工程师</td>
    </tr>
    <tr data-panel-content="李四的详细信息：负责后端架构设计，主导过3个大型项目">
      <td>李四</td>
      <td>32</td>
      <td>后端架构师</td>
    </tr>
    <tr data-panel-content="王五的详细信息：专注UI/UX设计，曾获行业设计大赛三等奖">
      <td>王五</td>
      <td>26</td>
      <td>UI设计师</td>
    </tr>
  </tbody>
</table>

<!-- 侧边面板 -->
<div id="side-panel" class="panel-hidden">
  <div class="panel-content"></div>
</div>

2. CSS样式 #

设置表格基础样式，面板采用绝对定位，隐藏状态通过panel-hidden类控制：

/* 表格样式 */
#data-table {
  border-collapse: collapse;
  width: 60%;
  margin: 20px;
}

#data-table th, #data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

#data-table tr {
  cursor: pointer;
  transition: background-color 0.2s;
}

#data-table tr:hover {
  background-color: #f5f5f5;
}

/* 侧边面板样式 */
#side-panel {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 15px;
  width: 250px;
  z-index: 100;
}

/* 面板隐藏类 */
.panel-hidden {
  display: none;
}

3. JavaScript交互逻辑 #

监听行点击事件，计算行位置并显示面板，同时支持点击外部关闭：

const table = document.getElementById('data-table');
const panel = document.getElementById('side-panel');
const panelContent = panel.querySelector('.panel-content');

// 表格行点击事件
table.addEventListener('click', (e) => {
  const row = e.target.closest('tr');
  // 排除表头行
  if (!row || row.parentElement.tagName === 'THEAD') return;

  // 获取行的位置信息，处理滚动偏移
  const rowRect = row.getBoundingClientRect();
  panel.style.top = `${rowRect.top + window.scrollY}px`;
  panel.style.left = `${rowRect.right + 10}px`;

  // 填充面板内容
  panelContent.textContent = row.dataset.panelContent;
  // 显示面板
  panel.classList.remove('panel-hidden');
});

// 点击页面其他区域隐藏面板
document.addEventListener('click', (e) => {
  if (!panel.contains(e.target) && !table.contains(e.target)) {
    panel.classList.add('panel-hidden');
  }
});

关键说明 #

• 用closest('tr')确保点击单元格时也能触发行的点击事件
• 通过getBoundingClientRect()获取行的实时位置，结合window.scrollY解决页面滚动后面板位置偏移的问题
• 行对应的面板内容存在data-*属性中，便于维护和扩展
• 点击页面非表格、非面板区域自动隐藏面板，提升交互流畅度

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