js中简单的将表单内容录入表格

在JavaScript中，你可以通过事件监听和DOM操作来实现将表单内容简单地录入表格。下面是一个基本的例子：

首先，假设你有一个HTML表单和一个表格结构，表单有若干输入字段如`<input>`元素，表格则是`<table>`, `<tr>`, `<td>`这样的结构。

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

  <!-- 更多输入字段... -->

  <button type="button" onclick="addDataToTable()">添加到表格</button>
</form>

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <!-- 表格其他列头 -->
    </tr>
  </thead>
  <tbody></tbody>
</table>

然后，在JavaScript部分，编写`addDataToTable`函数来处理表单数据并插入到表格中：

function addDataToTable() {
  // 获取表单元素的值
  const formData = {
    name: document.getElementById('nameInput').value,
    // ...获取更多输入字段的值
  };

  // 创建一个新的表格行
  const newRow = document.createElement('tr');
  
  // 获取每个表头创建对应单元格，并填充数据
  Object.keys(formData).forEach(key => {
    const cell = document.createElement('td');
    cell.textContent = formData[key];
    newRow.appendChild(cell);
  });

  // 将新行添加到表格body
  const tableBody = document.querySelector('#myTable tbody');
  tableBody.appendChild(newRow);

  // 清空表单以便再次输入
  document.getElementById('myForm').reset();
}

这个例子中，当用户点击“添加到表格”按钮时，会清空表单并将表单内输入的数据插入到表格的最后一行。如果需要处理多个字段，只需要在`formData`对象中添加对应的键值对即可。