如何始终让表格总计行保持在表格底部？

要实现点击添加按钮后新行不会挤走总计行，确保总计行一直留在表格最底部，你可以通过调整新行的插入位置来实现：

核心思路 #

找到表格里的总计行（id="total"），每次添加新数据行时，将新行插入到总计行的前面，而不是直接追加到表格末尾。

具体代码实现 #

const addButtonEl = document.getElementById('add-btn');
const expenseTable = document.getElementById('expense-table');
const totalRow = document.getElementById('total');

addButtonEl.addEventListener("click", addExpenseInput);

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>
    `;
    
    // 将新行插入到总计行之前，确保总计行始终在底部
    expenseTable.insertBefore(newRow, totalRow);
}

逻辑说明 #

• insertBefore()方法会把新创建的行插入到指定的总计行前面，无论添加多少条新数据，总计行都会固定在表格最后一行的位置。
• 无需修改现有HTML结构，只需要调整添加行的插入逻辑即可达到需求。

内容的提问来源于stack exchange，提问作者Melek ElMokhtar