正文

如何用JavaScript轻松实现表格行添加与删除功能，让你轻松管理数据表格

/0 浏览量
0423

在网页开发中，表格是展示和操作数据的一种常见方式。使用JavaScript来添加和删除表格行，可以让你更加灵活地管理数据。下面，我将详细讲解如何用JavaScript轻松实现表格行的添加与删除功能。

添加行

HTML结构

首先，我们需要一个基本的HTML表格结构：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
  </tbody>
</table>
<button onclick="addRow()">添加行</button>

JavaScript代码

接下来，我们需要编写JavaScript代码来实现添加行的功能：

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1); // 在表格末尾添加一行
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = "<input type='text' value='新名字'/>";
  cell2.innerHTML = "<input type='text' value='新年龄'/>";
  cell3.innerHTML = "<button onclick='deleteRow(this)'>删除</button>";
}

删除行

HTML结构

在HTML表格中，我们已经为每个操作按钮绑定了deleteRow函数：

<td><button onclick="deleteRow(this)">删除</button></td>

JavaScript代码

接下来，我们需要编写deleteRow函数来实现删除行的功能：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

总结

通过以上步骤，我们就可以轻松地使用JavaScript实现表格行的添加与删除功能。在实际应用中，你可以根据需要修改HTML结构和JavaScript代码，以满足不同的需求。希望这篇文章能帮助你更好地管理数据表格。

-- 展开阅读全文 --