JS获取单击按钮单元格所在行的信息

获取单元格所在行的信息一般需要以下步骤：

获取单元格所在行的信息一般需要以下步骤：

1. 对表格中的按钮进行事件绑定
2. 在事件绑定的回调函数中获取按钮所在的单元格元素td
3. 获取单元格所在的行元素tr
4. 根据需要获取行元素tr中的其他信息

以下是两条示例：

示例一

HTML代码：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

JS代码：

const deleteBtns = document.querySelectorAll('.delete-btn');

deleteBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取按钮所在的单元格元素td
    const td = btn.parentElement;

    // 获取单元格所在的行元素tr
    const tr = td.parentElement;

    // 获取行元素tr中的第一个单元格的内容（即ID）
    const id = tr.cells[0].textContent;

    // 根据需要进行其他操作
    console.log(`删除ID为${id}的记录`);
  });
});

示例二

HTML代码：

<table>
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>商品A</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr data-id="2">
      <td>商品B</td>
      <td>200</td>
      <td>3</td>
      <td>600</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

JS代码：

const deleteBtns = document.querySelectorAll('.delete-btn');

deleteBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取按钮所在的单元格元素td
    const td = btn.parentElement;

    // 获取单元格所在的行元素tr
    const tr = td.parentElement;

    // 获取行元素tr上保存的商品ID
    const id = tr.dataset.id;

    // 获取行元素tr中的第一个单元格的内容（即商品名称）
    const name = tr.cells[0].textContent;

    // 根据需要进行其他操作
    console.log(`删除商品${name}（ID为${id}）`);
  });
});

以上两个示例分别演示了如何获取表格中的ID和商品名称信息。需要注意的是，上述示例假设表格中的按钮全部为删除按钮，如果不是删除按钮，则需要根据实际情况修改代码实现。