表格工具按钮列显示更多时也能触发table的事件

概述

表格是前端开发中使用频率极高的一个元素，然而很多时候，我们需要在数据表格中进行一些操作，例如：排序、筛选等，这时候我们通常会添加一些工具按钮，但是，当列数较多时，这些按钮可能会被隐藏，因此，我们需要提供一个方法，触发这些按钮的同时，也触发数据表格的事件。

实现

1. 添加工具按钮

首先，我们需要添加一些工具按钮，这些按钮可以实现我们需要的功能。

<table>

  <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>10</td>
      <td>1.00</td>
      <td>
        <button class="edit-btn">编辑</button>
        <button class="delete-btn">删除</button>
      </td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>5</td>
      <td>2.00</td>
      <td>
        <button class="edit-btn">编辑</button>
        <button class="delete-btn">删除</button>
      </td>
    </tr>
  </tbody>
</table>

在上面的代码中，我们添加了两个按钮：一个是编辑按钮，一个是删除按钮。

2. 显示隐藏的按钮

当列数较多时，这些按钮可能会被隐藏，因此，我们需要提供一种方法，让它们能够显示出来。

<div id="table-container" style="position:relative">

  <table>
    ...
  </table>
  <div id="button-container" style="display:none;position:absolute;top:0;right:0">
    <button class="edit-btn">编辑</button>
    <button class="delete-btn">删除</button>
  </div>
</div>

在上面的代码中，我们添加了一个div元素，用于容纳这些按钮，然后设置了它的display为none，这样就可以将这些按钮隐藏起来。接着，我们还设置了它的position为absolute，top和right为0，这样就可以将它放在表格的右上角。

3. 触发事件

最后，我们需要添加一个方法，当这些按钮被点击时，同时也触发数据表格的事件。

const table = document.querySelector('#table');

const buttonContainer = document.querySelector('#button-container');
const editBtns = document.querySelectorAll('.edit-btn');
const deleteBtns = document.querySelectorAll('.delete-btn');
function init() {
  table.addEventListener('click', handleTableClick);
  buttonContainer.addEventListener('click', handleButtonContainerClick);
}
function handleTableClick(event) {
  // 获取所点击的单元格元素
  const target = event.target;
  // 判断是否为单元格中的按钮
  if (target.classList.contains('edit-btn') || target.classList.contains('delete-btn')) {
    // 获取对应行的数据
    const tr = target.closest('tr');
    const data = {
      name: tr.querySelector('td:first-child').textContent,
      count: tr.querySelector('td:nth-child(2)').textContent,
      price: tr.querySelector('td:nth-child(3)').textContent
    };
    // 触发表格的事件
    table.dispatchEvent(new CustomEvent(target.classList.contains('edit-btn') ? 'edit' : 'delete', {
      detail: data
    }));
  }
}
function handleButtonContainerClick(event) {
  // 触发表格的事件
  table.dispatchEvent(new CustomEvent(event.target.classList.contains('edit-btn') ? 'edit' : 'delete'));
}
init();

在上面的代码中，我们添加了一个init函数，用于初始化操作。在这个函数中，我们首先获取了数据表格和按钮容器的元素，然后用addEventListener函数为数据表格和按钮容器添加了一个click事件的监听器。接着，我们对这两个事件分别编写了一个处理函数：handleTableClick和handleButtonContainerClick。这两个函数的作用是获取所点击的按钮对应行的数据，然后触发数据表格的事件。

总结

通过上面的实现，我们可以实现在数据表格中添加一些工具按钮，并且在这些按钮被点击时，同时也触发数据表格的事件。这样做不仅可以提高用户体验，还可以增加数据表格的交互性。