通过 javascript 动态插入新行时，将其插入到总计行之前而非追加到表格末尾，即可确保总计行永远位于表格最底部，无需依赖 css 或重排 dom。

通过 javascript 动态插入新行时，将其插入到总计行之前而非追加到表格末尾，即可确保总计行永远位于表格最底部，无需依赖 css 或重排 dom。

在实际开发中，当表格需要支持动态增删行并保持“总计行”始终位于底部时，直接使用 appendChild() 将新行添加到 <tbody> 或 <code><table> 末尾会导致总计行被推至中间或上方，破坏语义结构与视觉逻辑。<strong>正确的做法是：定位总计行（如通过 <code>id="total"），再利用 insertBefore() 方法将新行插入其正前方——这样无论添加多少行，总计行都天然保留在最后一行位置。

以下是推荐的实现方式：

function addExpenseInput() {
  // 创建新行元素
  const newRow = document.createElement('tr');

  // 构建标准行结构（含 select 和 input）
  newRow.innerHTML = `
    <td>
      <select class="item-select">
        <option value="">Select Item</option>
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
      </select>
    </td>
    <td><input type="number" class="unit-price" step="0.01" min="0"></td>
    <td><input type="number" class="quantity" min="0" value="1"></td>
    <td><input type="text" class="total" value="0" disabled></td>
  `;

  // 获取总计行和表格容器
  const totalRow = document.getElementById('total');
  const table = document.getElementById('expense-table');

  // 关键：插入到总计行之前 → 确保总计行永远在底部
  if (totalRow && table) {
    table.insertBefore(newRow, totalRow);
  }
}

// 绑定事件
document.getElementById('add-btn').addEventListener('click', addExpenseInput);

✅ 注意事项与增强建议：

• ✅ DOM 安全性：务必检查 totalRow 和 table 是否存在，避免 insertBefore(null, null) 报错；
• ✅ 事件代理：为动态生成的 .unit-price 和 .quantity 输入框绑定 input 或 change 事件时，推荐使用事件委托（监听表格或 document），而非为每行重复绑定；
• ✅ 总计更新逻辑：应在输入变更后实时重算所有有效行的 unit-price × quantity 并汇总至 #total-result，示例可扩展如下：

  function updateTotal() {
    const rows = document.querySelectorAll('#expense-table tr:not(#total)');
    let sum = 0;
    rows.forEach(row => {
      const price = parseFloat(row.querySelector('.unit-price')?.value) || 0;
      const qty = parseInt(row.querySelector('.quantity')?.value) || 0;
      sum += price * qty;
    });
    document.getElementById('total-result').textContent = sum.toFixed(2);
  }
  // 在 addExpenseInput 后调用 updateTotal()，并在输入事件中节流调用

这种基于 DOM 插入顺序的方案简洁、可靠、兼容性强，不依赖 CSS position: sticky 或 tfoot（后者语义正确但需严格分离 <thead>/</thead> <tbody>/</tbody> <tfoot> 结构），是动态表格中维护固定底部行的最佳实践。</tfoot>