前端冒泡事件显示表格数据

你可以在表格的每一行中添加一个按钮或链接，当用户点击该按钮或链接时，触发冒泡事件，然后在事件处理程序中获取该行的数据，并将其显示在弹出框或侧边栏中。

例如，你可以使用以下代码来实现这个功能：

HTML：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>35</td>
      <td>USA</td>
      <td><button class="show-data">Show Data</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>28</td>
      <td>Canada</td>
      <td><button class="show-data">Show Data</button></td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

JavaScript：

// 获取表格元素和所有的按钮
const table = document.getElementById('myTable');
const buttons = table.querySelectorAll('.show-data');

// 为每个按钮添加事件监听器
buttons.forEach((button) => {
  button.addEventListener('click', showData);
});

// 定义事件处理程序
function showData(event) {
  // 获取所点击的按钮所在的行
  const row = event.target.closest('tr');

  // 获取该行中的数据
  const name = row.cells[0].textContent;
  const age = row.cells[1].textContent;
  const country = row.cells[2].textContent;

  // 将数据显示在弹出框中
  alert(`Name: ${name}\nAge: ${age}\nCountry: ${country}`);
}

这段代码会为表格中的每个按钮添加一个事件监听器，当用户点击该按钮时，会触发 `showData()` 函数。在该函数中，我们首先获取所点击的按钮所在的行，然后从该行中获取数据，并将其显示在弹出框中。