数据表按钮 - JavaScript

在Web开发中，数据表常用于展示大量数据。为了更加便捷地操作这些数据，我们通常会加上数据表按钮，这些按钮可以在用户点击时执行相关操作，如增加、删除或编辑数据等。在本文中，我们将介绍如何使用JavaScript创建数据表按钮。

HTML结构

首先，我们需要在HTML文件中创建一个数据表，可以使用HTML的table标签：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
      <td>
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>25</td>
      <td>
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

在表格中，我们为每一行最后一列添加了两个按钮，分别是“编辑”和“删除”。

JavaScript代码

接下来，我们使用JavaScript为按钮添加点击事件，实现增加、删除、编辑等功能。

删除数据

为了删除数据，我们首先需要为每个“删除”按钮添加点击事件，并获取该按钮所在行的数据：

document.querySelectorAll('button').forEach(btn => {
  if (btn.innerHTML === '删除') {
    btn.addEventListener('click', () => {
      // 删除数据
      const row = btn.parentNode.parentNode;
      // 获取行数据，假设第一列是ID
      const id = row.querySelector('td:first-child').innerHTML;
      console.log(`删除ID为${id}的数据`);
      row.remove(); // 删除行
    });
  }
});

在上面的代码中，我们使用了querySelectors和parentNode属性来获取按钮所在的行和行数据，并使用remove方法删除该行。

添加数据

要添加数据，我们需要在表格中添加一行，并为这行添加数据和按钮。首先，我们需要为添加按钮添加点击事件：

document.querySelector('#add').addEventListener('click', () => {
  // 创建新行
  const table = document.querySelector('table');
  const newRow = table.insertRow(-1); // -1 表示在末尾插入
  // 添加行数据，假设有3列数据
  const data = ['新数据1', '新数据2', '新数据3'];
  for (let i = 0; i < data.length; i++) {
    const cell = newRow.insertCell(i);
    cell.innerHTML = data[i];
  }
  // 添加按钮
  const btnCell = newRow.insertCell(-1);
  btnCell.innerHTML = `
    <button>编辑</button>
    <button>删除</button>
  `;
});

在上面的代码中，我们使用insertRow方法在表格末尾添加一行，并使用insertCell方法为每个单元格添加数据。我们同时为该行添加“编辑”和“删除”按钮，这样用户就可以在需要时对数据进行操作。

编辑数据

为了编辑数据，我们需要首先获取该行的数据，并将其填充到表单中。在这里，我们使用了一个全局变量editRow来记录目前正在编辑的行：

let editRow = null;
document.querySelectorAll('button').forEach(btn => {
  if (btn.innerHTML === '编辑') {
    btn.addEventListener('click', () => {
      // 编辑数据
      const row = btn.parentNode.parentNode;
      // 获取行数据，假设有3列数据
      const id = row.querySelector('td:first-child').innerHTML;
      const data = [
        row.querySelector('td:nth-child(2)').innerHTML,
        row.querySelector('td:nth-child(3)').innerHTML,
        row.querySelector('td:last-child')
      ];
      console.log(`编辑ID为${id}的数据`);

      // 填充表单
      document.querySelector('#name').value = data[0];
      document.querySelector('#age').value = data[1];

      // 保存正在编辑的行
      editRow = row;
    });
  }
});

当用户点击“编辑”按钮时，我们使用了querySelectors和innerHTML方法获取目标行的数据，并将其填充到表单中。在这里，我们假设表单有两个字段，分别是“名称”和“年龄”。

接下来，当用户更新表单并提交数据时，我们需要更新目标行的数据。我们可以在表单的submit事件中添加更新逻辑：

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault(); // 取消表单提交默认行为
  if (!editRow) return;

  // 更新数据
  const name = document.querySelector('#name').value;
  const age  = document.querySelector('#age').value;
  editRow.querySelector('td:nth-child(2)').innerHTML = name;
  editRow.querySelector('td:nth-child(3)').innerHTML = age;
  console.log(`更新ID为${editRow.querySelector('td:first-child').innerHTML}的数据`);

  // 清空表单
  document.querySelector('#name').value = '';
  document.querySelector('#age').value = '';
  editRow = null; // 重置正在编辑的行
});

在上面的代码中，我们使用了innerHTML属性将表单数据填充到目标行中，并使用了querySelector方法找到对应的单元格。最后，我们将正在编辑的行对象editRow设置为null，以表示编辑状态已结束。

结论

在本文中，我们介绍了如何使用JavaScript创建数据表按钮，并实现了增加、删除、编辑等功能。我们强烈建议你在编写类似的代码时，为代码添加注释，以便日后维护和理解。