嵌套Table中Form无法提交新增行数据，如何保留嵌套结构解决？

问题根源 #

你当前的HTML结构违反了HTML规范：<tr>的直接子元素只能是<td>或<th>，但你直接把<form>放在了<tr>内部。浏览器会自动修正这种非法DOM结构，将<form>移到外层<table>的外面，导致动态新增的行所在的子<table>脱离了<form>的管辖范围——表单提交时只会收集初始渲染时在<form>内的元素，新增行的控件不在其中，所以后端收不到数据。

解决方案：修正HTML嵌套结构 #

把每个表单放在外层表格的<td>中，确保DOM结构符合规范，这样浏览器不会自动调整结构，新增的行始终处于<form>范围内。

修改后的EJS代码 #

<table>
  <tbody>
    <%for (let i = 0; i < 2; i++) {%>
    <tr>
      <td>
        <form action="/test" method="post">
          <table class="table" id="table<%=i%>">
            <tbody>
              <%for (let j = 0; j < 2; j++) {%>
              <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>
          <table>
            <tr>
              <td>
                <button type='button' class="btn btn-lg" onclick="test('table<%=i%>')">Add Row</button>          
              </td>
              <td>
                <button type='submit' class="btn btn-lg">Save</button>
              </td>
            </tr>
          </table>
        </form>
      </td>
    </tr>
    <%}%>
  </tbody>
</table>

修改说明 #

1. 将原来直接放在<tr>里的<form>，包裹到一个<td>中，外层<tr>对应每个表单的行
2. 把提交按钮所在的<tr>放到新的小表格中，避免按钮行和表单表格的结构冲突
3. 原有动态新增行的JS代码和后端代码无需修改

验证效果 #

修改后，新增行的<select>和<input>会始终处于<form>范围内，提交表单时后端能收到完整的数组：
比如新增第三行选择a、输入3，后端会收到：

{ list: [ 'a', 'b', 'a'], listValue: [ '1', '2', '3' ] }

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