正文

掌握JS创建表单明细行项：轻松实现动态增减表格内容教程

/0 浏览量
0712

在Web开发中，处理表单数据是一项基本技能。而创建一个可以动态增减行项的表格，能够极大地方便用户输入和管理数据。本文将带你一步步学习如何使用JavaScript（JS）来创建这样的动态表格。

一、准备工作

在开始之前，我们需要准备以下内容：

  1. HTML：用于创建表格的基本结构。
  2. CSS：用于美化表格的样式。
  3. JavaScript：用于实现动态添加和删除行项的功能。

二、创建表格结构

首先，我们需要在HTML中创建一个基本的表格结构。以下是一个简单的例子：

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态行项将在这里插入 -->
  </tbody>
</table>
<button onclick="addRow()">添加行</button>

这里，我们创建了一个包含四个列的表格，其中“操作”列用于删除行项。

三、添加行项

接下来，我们将使用JavaScript来添加行项。以下是一个实现添加行项的函数：

function addRow() {
  var table = document.getElementById("myTable");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = "<input type='text' name='name[]' />";
  cell2.innerHTML = "<input type='number' name='quantity[]' value='1' min='1' />";
  cell3.innerHTML = "<input type='number' name='price[]' value='0' min='0' />";
  cell4.innerHTML = "<button onclick='deleteRow(this)'>删除</button>";
}

这个函数会在表格的最后一行插入一个新的行项，其中包含三个输入框和一个删除按钮。

四、删除行项

为了实现删除行项的功能，我们需要在HTML中添加一个删除按钮，并为每个按钮绑定一个事件处理函数。以下是一个实现删除行项的函数：

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

这个函数会删除按钮所在的行。

五、总结

通过以上步骤，我们已经成功创建了一个可以动态增减行项的表格。在实际应用中，你可以根据需求对表格进行扩展，例如添加计算总价的功能、验证输入数据等。

希望这篇教程能帮助你更好地掌握使用JavaScript创建动态表格的方法。如果你有任何疑问或建议，欢迎在评论区留言交流。

-- 展开阅读全文 --