点击动态HTML表格按钮如何获取对应行的联盟数据？

开发者阿泽

2026-8-13

获取动态表格按钮所在行的联盟数据用于生成饼图

我正在开发一个基于选举结果计算议会席位占比的练习应用，大部分功能已完成。当前有一个动态生成的HTML表格（ID为coalitionTable）展示所有三方联盟信息，表格最后一列的「Visualize」按钮点击后需要生成对应联盟与剩余席位的饼图。已经给按钮绑定了eventListener监听点击事件，但一开始不知道如何获取按钮所在行的第一列联盟名称和第三列席位占比数据，后来通过两次调用按钮元素的parentNode定位到所在<tr>，顺利提取到了所需数据。

实现代码示例

// 为所有Visualize按钮绑定点击事件
document.querySelectorAll('.VisualizeBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    
    // 定位按钮所在的行：按钮的父元素是<td>，再往上一层就是<tr>
    const currentRow = this.parentNode.parentNode;
    
    // 提取联盟名称（第一列）
    const coalition = currentRow.querySelector('td:nth-child(1)').textContent.trim();
    // 提取席位占比（第三列），并处理成数值
    const seatPercentText = currentRow.querySelector('td:nth-child(3)').textContent.trim();
    const coalitionPercent = parseFloat(seatPercentText.replace('%', ''));
    const remainingPercent = 100 - coalitionPercent;
    
    // 这里加入饼图生成逻辑，比如传入以下数据
    console.log(`联盟: ${coalition}`);
    console.log(`联盟席位占比: ${coalitionPercent}%`);
    console.log(`剩余席位占比: ${remainingPercent}%`);
  });
});