点击表格行末按钮时如何获取该行第二列（Email）单元格的值？

点击表格同一行最后一个单元格内的按钮时，获取该行第二列（Email）的单元格值。例如点击Button 1时获取Email1的值，点击Button 2时获取对应行的Email值。

现有渲染代码（需修正重复ID问题）：

function renderCustomers(tasks) {
customerList.innerHTML += `
    <tr >
        <th >Name</th>
        <th >Email</th>
        <th >Contacts</th>
        <th >Address</th>
        <th >Country</th>
        <th >Action</th>
    </tr>`;    
tasks.forEach((t) => {
  customerList.innerHTML += `
    <tr class=" animated bounceInUp">
        <td >${t.Name}</td>
        <td >${t.Email}</td>
        <td >${t.Contacts}</td>
        <td >${t.Address}</td>
        <td >${t.Country}</td>
        <td ><button class="btn btn-success btn-xs" id="getCustomerEmail">
            Get Customer Email
        </button></td>
    </tr>`;
});
}

解决方案 #

方案一：渲染时直接绑定事件（简易直接） #

先修正按钮重复ID的问题（ID需唯一，改用class标识），再给每个按钮绑定点击事件，通过父级行获取Email值：

function renderCustomers(tasks) {
  customerList.innerHTML += `
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contacts</th>
        <th>Address</th>
        <th>Country</th>
        <th>Action</th>
    </tr>`;    
  tasks.forEach((t) => {
    customerList.innerHTML += `
      <tr class="animated bounceInUp">
          <td>${t.Name}</td>
          <td>${t.Email}</td>
          <td>${t.Contacts}</td>
          <td>${t.Address}</td>
          <td>${t.Country}</td>
          <td><button class="btn btn-success btn-xs get-customer-email">
              Get Customer Email
          </button></td>
      </tr>`;
  });

  // 给所有按钮绑定点击事件
  document.querySelectorAll('.get-customer-email').forEach(btn => {
    btn.addEventListener('click', function() {
      // 获取按钮所在的行
      const row = this.closest('tr');
      // 获取第二列（索引从0开始，Email列是索引1）的文本
      const email = row.cells[1].textContent.trim();
      alert(email);
      // 这里可替换为你的业务逻辑
    });
  });
}

方案二：事件委托（高效适配动态内容） #

如果表格会动态新增行，事件委托更高效——只需给父容器绑定一次事件，无需每次渲染都重新绑定：

// 页面加载完成后绑定事件委托
document.addEventListener('DOMContentLoaded', function() {
  // 替换为你的表格容器/表格ID
  const tableContainer = document.getElementById('customerList');
  tableContainer.addEventListener('click', function(e) {
    // 判断点击的是目标按钮
    if (e.target.classList.contains('get-customer-email')) {
      const row = e.target.closest('tr');
      const email = row.cells[1].textContent.trim();
      alert(email);
      // 执行你的业务逻辑
    }
  });
});

// 渲染函数仅修正按钮class，去掉重复ID
function renderCustomers(tasks) {
  customerList.innerHTML += `
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contacts</th>
        <th>Address</th>
        <th>Country</th>
        <th>Action</th>
    </tr>`;    
  tasks.forEach((t) => {
    customerList.innerHTML += `
      <tr class="animated bounceInUp">
          <td>${t.Name}</td>
          <td>${t.Email}</td>
          <td>${t.Contacts}</td>
          <td>${t.Address}</td>
          <td>${t.Country}</td>
          <td><button class="btn btn-success btn-xs get-customer-email">
              Get Customer Email
          </button></td>
      </tr>`;
  });
}

关键注意点 #

• 必须修正原代码中按钮重复ID的问题：ID是页面唯一标识，多个元素不能共用，改用class选择器。
• closest('tr')方法可快速定位按钮所在的行，比逐层调用parentNode更可靠。
• 表格列索引从0开始，第二列（Email）对应的索引是1，因此用row.cells[1]获取目标单元格。

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