如何修改JavaScript代码实现WP_List_Table选中行金额求和？

核心思路 #

1. 监听复选框的选择状态变化（包括全选按钮）
2. 对每个选中的行，提取金额列中的纯数值（去除欧元符号、千分位分隔符等非数字内容）
3. 实时计算累加总和并格式化输出

具体代码修改 #

1. 编写金额求和核心函数 #

function calculateSelectedTotal() {
    let total = 0;
    // 遍历所有选中的行复选框
    document.querySelectorAll('.wp-list-table input[type="checkbox"]:checked').forEach(checkbox => {
        const row = checkbox.closest('tr');
        if (!row) return;
        
        // 定位金额列：替换成你实际表格中金额列的class或选择器
        const amountText = row.querySelector('.column-amount').textContent.trim();
        // 提取纯数字：移除欧元符号、空格、千分位逗号
        const amount = parseFloat(amountText.replace(/€|,|\s/g, ''));
        
        // 验证有效数字后累加
        if (!isNaN(amount)) {
            total += amount;
        }
    });
    
    // 将总和格式化为带欧元符号的标准格式
    const formattedTotal = new Intl.NumberFormat('de-DE', {
        style: 'currency',
        currency: 'EUR'
    }).format(total);
    
    // 将结果插入页面指定位置（需提前在页面添加id为selected-total的元素）
    document.getElementById('selected-total').textContent = `选中金额总和：${formattedTotal}`;
}

2. 绑定事件监听 #

document.addEventListener('DOMContentLoaded', function() {
    // 方式1：给每个复选框绑定事件（适合行数不多的情况）
    document.querySelectorAll('.wp-list-table input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', calculateSelectedTotal);
    });

    // 方式2：事件委托（适合大量行的表格，性能更优）
    // document.querySelector('.wp-list-table').addEventListener('change', function(e) {
    //     if (e.target.type === 'checkbox') {
    //         calculateSelectedTotal();
    //     }
    // });
    
    // 初始加载时计算一次（处理默认选中的行）
    calculateSelectedTotal();
});

3. 页面添加总和显示元素 #

在表格上方或下方插入用于展示总和的容器：

<div id="selected-total" style="margin: 10px 0; font-weight: 700;"></div>

关键注意事项 #

• 选择器匹配：确保row.querySelector('.column-amount')中的选择器与你实际表格中金额列的HTML结构一致，比如你的金额列是<td class="amount-col">€999.99</td>，就把选择器改成.amount-col。
• 格式兼容：如果你的金额使用逗号作为小数点（部分欧洲地区格式），调整正则和格式化参数即可适配。
• 全选按钮兼容：WP默认的全选复选框id通常是cb-select-all-1，如果你的表格有自定义id，需对应调整事件绑定的选择器。

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