用原生JS打造活力四射的可编辑表格

前端

2023-03-15 12:04:15

用原生JavaScript打造活力四射的可编辑表格

在Web开发中，表格扮演着至关重要的角色，承载着数据展示和交互的重任。无论是管理系统中的记录还是电子表格中的统计数字，表格无处不在。而可编辑表格更是锦上添花，它赋予用户直接在表格中修改数据的权限，大大提高了数据处理的效率和灵活性。

借助原生JavaScript这门强大的编程语言，实现可编辑表格轻而易举。通过巧妙地操控DOM元素和事件处理，你可以让表格像电子表格一样，赋予用户随时编辑的权利。

原生JavaScript实现可编辑表格的步骤

打造一个可编辑表格，你需要遵循以下几个步骤：

1. 创建表格结构

首先，你需要搭建一个基础的表格结构，包括表头、表体和表尾。利用HTML的

元素创建表格，元素创建行，

元素创建列。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>45</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

2. 添加数据

接下来，你需要将数据填充到表格中。你可以通过JavaScript的DOM操作动态地添加数据，也可以通过AJAX从服务器获取数据并填充到表格中。

// 获取表格元素
var table = document.getElementById('table');

// 创建表头
var header = table.createTHead();
var headerRow = header.insertRow();
headerRow.insertCell().textContent = '姓名';
headerRow.insertCell().textContent = '年龄';
headerRow.insertCell().textContent = '性别';

// 创建表体
var body = table.createTBody();

// 添加数据
for (var i = 0; i < data.length; i++) {
  var row = body.insertRow();
  row.insertCell().textContent = data[i].name;
  row.insertCell().textContent = data[i].age;
  row.insertCell().textContent = data[i].gender;
}

// 创建表尾
var footer = table.createTFoot();
var footerRow = footer.insertRow();
footerRow.insertCell().textContent = '合计';
footerRow.insertCell().textContent = 45;
footerRow.insertCell().textContent = '-';

3. 实现编辑功能

要让表格具备可编辑能力，你需要在单元格上添加事件监听器。当用户点击单元格时，触发编辑事件。JavaScript的addEventListener()方法可以轻松实现这一点。

// 获取所有单元格元素
var cells = document.querySelectorAll('td');

// 遍历单元格元素
for (var i = 0; i < cells.length; i++) {
  // 添加点击事件监听器
  cells[i].addEventListener('click', function() {
    // 获取单元格的内容
    var value = this.textContent;

    // 创建一个输入框
    var input = document.createElement('input');
    input.type = 'text';
    input.value = value;

    // 替换单元格的内容
    this.replaceWith(input);

    // 添加失去焦点事件监听器
    input.addEventListener('blur', function() {
      // 获取输入框的内容
      var newValue = this.value;

      // 更新单元格的内容
      this.replaceWith(document.createTextNode(newValue));
    });
  });
}