如何将动态添加的表格行转为数组并批量存入数据库？

问题根源 #

你当前的代码中，所有新增行的输入框使用了相同的name和重复的id，提交时后端只能接收到一组参数值，因此只会向数据库存储一行数据。要实现每行对应数据库一条记录，需要从前端和后端两部分修改：

1. 前端修改（核心是将输入框name改为数组格式） #

修改addRow函数，移除重复的id（页面元素id必须唯一），并将输入框的name改为数组形式（如testCaseName[]），确保提交时浏览器能把所有行的参数打包成数组：

function addRow() {
    var table = document.getElementById("table");
    var row = table.insertRow(1); // 插入到表头下方，避免按钮行被顶置
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "<h4></h4>";
    cell2.innerHTML = "<input type='text' name='testCaseName[]'>";
    cell3.innerHTML = "<textarea name='testProcedure[]' onkeydown='resize(this)' onkeyup='resize(this)'></textarea>";
    cell4.innerHTML = "<input type='text' name='expect[]'>";
}

同时修改原表格的初始行，将name也改为数组格式：

<table id="table">
    <tr>
        <td>num</td>
        <td>name</td>
        <td>procedure</td>
        <td>expect</td>
    </tr>
    <tr>
        <td><h4></h4></td>
        <td><input type="text" name="testCaseName[]"></td>
        <td><textarea name="testProcedure[]" onkeydown="resize(this)" onkeyup="resize(this)"></textarea></td>
        <td><input type="text" name="expect[]"></td>
    </tr>
    <tr>
        <td colspan="4">
            <input type="button" value="addRow" onclick="addRow()">
            <input type="submit" value="submit">
        </td>
    </tr>
</table>

2. 后端修改（接收数组参数并批量保存） #

Controller层

修改接口，接收多行数据的数组参数，这里提供两种实现方式：

• 方式一：直接接收List<TestCase>（要求实体类字段名与前端参数名对应）

@RequestMapping("/testCase/register")
public String register(@ModelAttribute List<TestCase> testCases) {
    testCaseService.registerBatch(testCases);
    return "redirect:/testCase/projectList";
}

• 方式二：手动接收数组并组装实体（适用于自动映射异常场景）

@RequestMapping("/testCase/register")
public String register(@RequestParam("testCaseName[]") List<String> names,
                       @RequestParam("testProcedure[]") List<String> procedures,
                       @RequestParam("expect[]") List<String> expects) {
    List<TestCase> testCases = new ArrayList<>();
    for (int i = 0; i < names.size(); i++) {
        TestCase tc = new TestCase();
        tc.setTestCaseName(names.get(i));
        tc.setTestProcedure(procedures.get(i));
        tc.setExpect(expects.get(i));
        // 补充其他必填字段（如项目ID等）
        testCases.add(tc);
    }
    testCaseService.registerBatch(testCases);
    return "redirect:/testCase/projectList";
}

Service层

新增批量保存方法，使用JPA的saveAll实现批量插入：

// Service接口
void registerBatch(List<TestCase> testCases);

// ServiceImpl实现
@Override
@Transactional
public void registerBatch(List<TestCase> testCases) {
    testCaseRepository.saveAll(testCases);
}

原理说明 #

前端用name[]格式提交时，浏览器会将所有同名输入框的值打包成数组发送给后端；后端通过saveAll方法，会自动生成类似你期望的批量INSERT语句，最终实现每行数据对应数据库一条记录。

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