将文本输入框内容加入表中的js代码

让我来为你详细讲解如何将文本输入框中的内容加入表中的 JS 代码步骤：

步骤一：HTML 表单

首先，需要在 HTML 页面中添加表单来获取用户输入的数据，例如：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <br><br>
  <input type="button" value="添加" onclick="addRow()">
</form>

其中 <form> 标签创建了一个表单，里面包含了两个输入框和一个添加按钮。 <input> 标签用于创建文本输入框，其中 type 属性为 text 和 email，分别表示文本框和邮箱格式。需要注意的是，每个输入框都应该有一个 id 属性来标识不同的元素，它们将在后台的 JS 代码中使用。

步骤二：JS 代码

接下来，需要在 HTML 页面上添加 JS 代码来将输入框中的内容加入表格中。

// 获取表格对象
var table = document.getElementById("myTable");

// 添加一行
function addRow() {
  // 获取输入框的值
  var username = document.getElementById("username").value;
  var email = document.getElementById("email").value;

  // 创建一行
  var row = table.insertRow(-1);

  // 添加单元格
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  // 设置单元格内容
  cell1.innerHTML = username;
  cell2.innerHTML = email;
}

代码解释：

首先，获取了一个 ID 为 myTable 的表格。接着，定义了一个 addRow 函数，该函数在点击按钮时会被调用。在函数内部，首先获取了两个输入框中的值，这些值将被用于创建新行，新行将被插入到表格的末尾。

接下来，创建一个行对象并将其插入到表格中。通过调用 insertCell 函数向行中添加两列单元格，最后通过设置单元格的 innerHTML 属性，将输入框中的值设置为单元格的内容。这样就完成了将文本输入框的内容添加到表中的操作。

示例说明

下面是几个示例说明：

示例一

假设我们有一个包含两个列（用户名和邮箱）的表格，我们希望将用户输入的用户名和邮箱添加到表格的末尾。

用户在前端页面上输入了以下数据：

用户名	邮箱
Alice
Bob

添加新行之后，表格将会变成：

用户名	邮箱
Alice	[e-mail]
Bob	[e-mail]

示例二

如果表格中已经存在了一些行，那么新添加的行将会在表格的结尾。

假设表格如下所示：

用户名	邮箱
Charlie	[e-mail]
David	[e-mail]

用户在输入框中输入新的数据：

用户名	邮箱
Eva	[e-mail]

当用户点击“添加”按钮时，新行将会添加在表格的下方：

用户名	邮箱
Charlie	[e-mail]
David	[e-mail]
Eva	[e-mail]