正文

学会用JS轻松实现表单数据自动填充到表格，告别手动录入烦恼

/0 浏览量
0506

在日常生活中，我们经常需要处理各种表单数据，并将这些数据录入到表格中。手动录入不仅费时费力，而且容易出错。今天，我将教大家如何使用JavaScript轻松实现表单数据自动填充到表格，让你告别手动录入的烦恼。

1. 准备工作

在开始之前，我们需要准备以下几样东西：

  • HTML表单：包含需要录入的数据字段。
  • HTML表格：用于展示录入的数据。
  • CSS样式：美化页面和表格。
  • JavaScript代码：实现自动填充功能。

2. HTML表单

首先，我们需要创建一个HTML表单，其中包含需要录入的数据字段。以下是一个简单的示例：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="age">年龄：</label>
  <input type="text" id="age" name="age"><br><br>

  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email"><br><br>

  <button type="button" onclick="fillTable()">填充表格</button>
</form>

3. HTML表格

接下来，我们需要创建一个HTML表格，用于展示录入的数据。以下是一个简单的示例：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据将在这里自动填充 -->
  </tbody>
</table>

4. CSS样式

为了美化页面和表格，我们可以添加一些CSS样式。以下是一个简单的示例：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

5. JavaScript代码

最后，我们需要编写JavaScript代码来实现自动填充功能。以下是一个简单的示例：

function fillTable() {
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var email = document.getElementById("email").value;

  var table = document.getElementById("myTable").getElementsByTagName("tbody")[0];
  var newRow = table.insertRow(table.rows.length);

  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);

  cell1.innerHTML = name;
  cell2.innerHTML = age;
  cell3.innerHTML = email;
}

6. 总结

通过以上步骤，我们成功实现了使用JavaScript将表单数据自动填充到表格的功能。这样，我们就可以轻松地处理大量数据，提高工作效率，告别手动录入的烦恼。希望这篇文章能帮助你，祝你学习愉快！

-- 展开阅读全文 --