html多个主子表批量提交

在HTML中处理多个嵌套表格（即主子表）并批量提交数据通常涉及JavaScript或Ajax技术，因为纯HTML本身不具备直接的批量提交功能。下面是一个简化的例子：

1. **HTML结构**:

<table id="mainTable">
  <thead>
    <tr>
      <!-- 主表头 -->
    </tr>
  </thead>
  <tbody>
    <!-- 可能包含多个子表 tr -->
    <tr>
      <td><input type="text" name="subTableData[]" /></td>
      <!-- 子表数据列 -->
      <td>
        <table id="subTable">
          <!-- 子表内容 -->
        </table>
      </td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>
<button onclick="submitBatch()">批量提交</button>

2. **JavaScript/Ajax**:

function submitBatch() {
  const mainTable = document.getElementById('mainTable');
  const subTables = mainTable.querySelectorAll('#subTable tbody tr');

  // 遍历每个子表
  subTables.forEach((row) => {
    const rowData = row.querySelectorAll('input[name=subTableData[]]').map(input => input.value);
    // 构造或封装数据对象
    const dataObject = { ... };
    
    // 使用Ajax提交数据到服务器（这里只是一个示例，实际使用fetch、axios等）
    fetch('/api/batch', {
      method: 'POST',
      body: JSON.stringify(dataObject),
      headers: { 'Content-Type': 'application/json' },
    })
    .then(response => response.json())
    .catch(error => console.error('Error:', error));
  });
}

在这个例子中，点击“批量提交”按钮会触发`submitBatch`函数，它会获取所有子表格的输入值，并将它们作为数组一起发送到服务器。