如何上移HTML表格行，将Crack Filling/Routing小计行归入服务组？

方法一：直接修改HTML结构（推荐） #

这是最直接可靠的方式，直接调整表格行的位置，把「Crack Filling/Routing Subtotal」行放到「Crack Filling/Routing」服务组的最后一行之后、其他服务组的第一行之前。

假设你当前的表格结构类似这样：

<table>
  <tbody>
    <!-- Crack Filling/Routing 服务项 -->
    <tr><td>Crack Filling/Routing - Basic</td><td>$120</td></tr>
    <tr><td>Crack Filling/Routing - Premium</td><td>$180</td></tr>
    <!-- 其他服务组 -->
    <tr><td>Sealcoating - Standard</td><td>$200</td></tr>
    <!-- 原来的小计行位置 -->
    <tr class="subtotal-row"><td>Crack Filling/Routing Subtotal</td><td>$300</td></tr>
  </tbody>
</table>

修改后调整行顺序：

<table>
  <tbody>
    <!-- Crack Filling/Routing 服务项 -->
    <tr><td>Crack Filling/Routing - Basic</td><td>$120</td></tr>
    <tr><td>Crack Filling/Routing - Premium</td><td>$180</td></tr>
    <!-- 移动后的小计行 -->
    <tr class="subtotal-row"><td>Crack Filling/Routing Subtotal</td><td>$300</td></tr>
    <!-- 其他服务组 -->
    <tr><td>Sealcoating - Standard</td><td>$200</td></tr>
  </tbody>
</table>

方法二：用JavaScript动态调整（适合无法修改HTML的场景） #

如果表格是动态生成的没法直接改HTML，可以通过DOM操作移动行：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 获取小计行
  const subtotalRow = document.querySelector('.subtotal-row');
  // 获取「Crack Filling/Routing」服务组的最后一行（根据实际情况调整选择器）
  const lastCrackRow = Array.from(document.querySelectorAll('tr'))
    .filter(row => row.textContent.includes('Crack Filling/Routing'))
    .pop();
  
  // 把小计行插入到服务组最后一行的下一个位置
  if (lastCrackRow && subtotalRow) {
    lastCrackRow.parentNode.insertBefore(subtotalRow, lastCrackRow.nextSibling);
  }
});

如果知道其他服务组的起始行（比如「Sealcoating」的第一行），也可以把小计行插到它前面：

const sealcoatingFirstRow = document.querySelector('tr:has(td:contains("Sealcoating"))');
if (sealcoatingFirstRow && subtotalRow) {
  sealcoatingFirstRow.parentNode.insertBefore(subtotalRow, sealcoatingFirstRow);
}

样式调整（可选） #

如果移动后小计行的视觉和服务组不协调，可以调整CSS强化分组感：

.subtotal-row {
  font-weight: bold;
  border-top: 1px solid #ddd;
  padding-top: 8px;
}

注意事项 #

• 如果表格是后端渲染生成的，优先修改后端的渲染逻辑，确保HTML结构正确，比前端JS调整更稳定
• 使用JS时，选择器要根据你实际的HTML结构调整，避免选择错误的元素

内容的提问来源于stack exchange，提问作者Node.JS