JavaScript动态添加表单项无法通过req.body获取数据求助

问题根源 #

你的核心问题是表单结构错误，导致动态新增的行不在表单范围内：

• 原EJS代码中，<form>标签在表格<tbody>内部提前闭合，新增的表格行被插入到</form>之后，不属于表单的一部分，提交时自然不会被后端捕获。
• 初始行包含操作按钮列，导致新增行时错误生成了多余的无表单控件单元格，进一步干扰了表单结构。

解决方案 #

1. 修正表单与表格的嵌套结构 #

让<form>完整包裹整个表格，确保所有动态添加的行都在表单内部。

2. 分离操作按钮与表单行 #

将Add和Submit按钮移到表格外部，避免新增行时错误复制按钮单元格，让表格行只保留需要提交的表单控件。

3. 调整行添加逻辑 #

根据修正后的表格结构，只生成包含select和input的单元格，无需处理按钮列。

修改后的代码 #

EJS代码 #

<form action="/save" method="post">
  <table class="table" id="table1">
    <tbody>
      <tr>
        <td>
          <select class="form-control" name="list[]">
            <option value="a">a</option>
            <option value="b">b</option>
          </select>
        </td>
        <td>
          <input class="form-control" name="listValue[]" type="number" step="any" value="0">
        </td>
      </tr>
    </tbody>
  </table>
  <button type='button' class="btn btn-lg" onclick="addRow('table1')">Add Row</button>
  <button type='submit' class="btn btn-lg">Save</button>
</form>

JavaScript代码 #

function addRow(tableId) {
  var table = document.getElementById(tableId);
  var row = table.insertRow();
  // 生成select单元格
  var selectCell = row.insertCell();
  selectCell.innerHTML = '<select class="form-control" name="list[]">'
    + '<option value="a">a</option>'
    + '<option value="b">b</option>'
    + '</select>';
  // 生成input单元格
  var inputCell = row.insertCell();
  inputCell.innerHTML = '<input class="form-control" name="listValue[]" type="number" step="any" value="0">';
}

后端代码（无需修改） #

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const bodyParser = require('body-parser');
const open = require('open');
const fs = require('fs');
const prompt = require('prompt-async')
require('dotenv').config();
let cors = require("cors");

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }))
app.use(express.json())
app.engine('html', require('ejs').renderFile)
app.set('view engine', 'ejs')

//post request
app.post("/save", async (req, res) => {
    console.log(req.body)
})

验证效果 #

修改后，所有新增行的表单控件都属于表单的一部分，提交时后端req.body会收到两个数组：

• list：包含所有行的select选中值（如['a', 'b']）
• listValue：包含所有行的输入数值

内容的提问来源于stack exchange，提问作者5UP3RB