前端表格多条数据合并成一条提交的实现

我们可以通过以下步骤来实现前端表格多条数据合并成一条提交：

1. 首先，我们需要在前端页面中设计一个表格，包含需要合并的多条数据。

2. 接着，我们需要在表格的每一行中添加一个复选框，用于选择需要合并的数据。

3. 当用户选择多个数据时，我们需要将这些数据合并为一条数据。可以通过遍历选中的行，将每行数据中的指定字段进行合并，例如合并姓名、电话、地址等字段。

4. 在合并完成后，将合并后的数据显示在表格的第一行，并将其它选中的行删除。

5. 最后，将合并后的数据提交到后端进行保存。

示例代码：

HTML：

<table>
  <thead>
    <tr>
      <th>选择</th>
      <th>姓名</th>
      <th>电话</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>张三</td>
      <td>123456789</td>
      <td>北京市朝阳区</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>李四</td>
      <td>987654321</td>
      <td>上海市浦东新区</td>
    </tr>
  </tbody>
</table>
<button id="merge-btn">合并</button>

JavaScript：

const mergeBtn = document.querySelector('#merge-btn');
const tbody = document.querySelector('tbody');

mergeBtn.addEventListener('click', () => {
  const selectedRows = Array.from(tbody.querySelectorAll('tr'))
    .filter(row => row.querySelector('input[type="checkbox"]').checked);

  if (selectedRows.length < 2) {
    alert('请选择至少两行数据进行合并！');
    return;
  }

  const mergedRow = selectedRows.reduce((result, row) => {
    result.name += row.querySelector('td:nth-child(2)').textContent;
    result.phone += row.querySelector('td:nth-child(3)').textContent;
    result.address += row.querySelector('td:nth-child(4)').textContent;
    tbody.removeChild(row);
    return result;
  }, { name: '', phone: '', address: '' });

  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td><input type="checkbox"></td>
    <td>${mergedRow.name}</td>
    <td>${mergedRow.phone}</td>
    <td>${mergedRow.address}</td>
  `;
  tbody.insertBefore(newRow, tbody.firstChild);
});