前端开发神器：轻松实现数据表格添加与删除功能

2023-06-15 01:29:59

用 JavaScript 巧妙实现数据表格的添加与删除功能

简介

在前端开发中，数据表格扮演着不可或缺的角色。高效实现数据表格的添加与删除功能是许多开发者面临的挑战。本文将详细介绍如何使用 JavaScript 轻松搞定这一难题。

1. HTML 结构

数据表格的 HTML 结构非常简单。创建一个包含表头（thead）和表格体（tbody）的表格元素。表头包含表格列的标题，而表格体用于存储实际数据。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

2. JavaScript 代码

JavaScript 代码负责实现表格的动态功能。以下是核心代码段：

// 获取表格元素
const table = document.querySelector('table');

// 获取表格体元素
const tbody = table.querySelector('tbody');

// 添加一行数据
const addRow = (name, age) => {
  // 创建表格行元素
  const row = document.createElement('tr');

  // 创建姓名、年龄和操作列元素
  const nameCell = document.createElement('td');
  const ageCell = document.createElement('td');
  const deleteCell = document.createElement('td');

  // 设置姓名和年龄单元格的内容
  nameCell.textContent = name;
  ageCell.textContent = age;

  // 创建删除按钮并添加事件监听器
  const deleteButton = document.createElement('button');
  deleteButton.textContent = '删除';
  deleteButton.addEventListener('click', () => {
    row.remove();
  });

  // 将删除按钮添加到操作列
  deleteCell.appendChild(deleteButton);

  // 将单元格添加到表格行中
  row.appendChild(nameCell);
  row.appendChild(ageCell);
  row.appendChild(deleteCell);

  // 将表格行添加到表格体中
  tbody.appendChild(row);
};

3. 使用示例

将 JavaScript 代码添加到 HTML 文件中，就可以使用数据表格功能了。以下是完整示例：

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>数据表格添加与删除</h1>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <br>
    <label for="name-input">姓名：</label>
    <input type="text" id="name-input">
    <br>
    <label for="age-input">年龄：</label>
    <input type="number" id="age-input">
    <br>
    <button id="add-button">添加</button>
  </body>
</html>