通过 javascript 动态插入新行时，始终将其置于总计行之前，而非追加到表格末尾，即可确保总计行永远位于表格最底部。
通过 javascript 动态插入新行时，始终将其置于总计行之前，而非追加到表格末尾，即可确保总计行永远位于表格最底部。
在构建动态表格（如费用录入表）时，一个常见需求是：无论用户添加多少条数据行，用于汇总的“总计行”必须稳定处于表格底部。若直接使用 table.appendChild(newRow)，新行会不断追加到表格末尾，导致总计行被挤到下方甚至消失——这显然违背设计初衷。
核心解决方案：使用 insertBefore() 方法精准控制插入位置
关键在于不依赖“追加”，而是主动定位总计行（例如通过 id="total"），再将新行插入其正前方：
function addExpenseInput() {
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>
<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"></td>
<td><input type="number" class="quantity"></td>
<td><input type="text" class="total" value="0" disabled></td>
`;
const totalRow = document.getElementById('total');
const table = document.getElementById('expense-table');
// ✅ 精准插入：newRow 将出现在 totalRow 之前
table.insertBefore(newRow, totalRow);
}
document.getElementById('add-btn').addEventListener('click', addExpenseInput);
✅ 优势说明：
- 无需重排整个表格 DOM，性能高效；
- 不依赖 CSS（如
position: sticky或tfoot）——兼容所有主流浏览器； - 逻辑清晰、易于维护，且与现有 HTML 结构完全解耦。
⚠️ 注意事项：
- 确保总计行具有唯一且稳定的
id（如id="total"），避免因重复 ID 导致getElementById返回错误节点； - 若后续需支持删除行，请同步更新总计逻辑，并确保删除操作不会误删总计行（建议为总计行添加
class="summary-row"并在删除逻辑中跳过该类）； - 实际项目中，建议为新插入的
<input>元素绑定实时计算事件（如input或change），以自动更新每行小计及最终总计值。
总结：保持总计行置底的本质，不是“固定它”，而是“聪明地插入其他行”。insertBefore(newRow, totalRow) 是语义明确、健壮可靠的 DOM 操作范式，应作为动态表格结构管理的标准实践。
