如何对网格中选中行的val_itemservico列执行求和计算

没问题，我来帮你搞定这个需求！你只需要给「Calcular」按钮添加一个点击事件处理函数，在函数里筛选出被勾选的行，然后对这些行的val_itemservico列数值求和即可。下面是具体的实现步骤和代码示例：

步骤1：完善HTML结构 #

首先确保你的HTML里包含这些关键元素（如果已有，只需对应调整选择器即可）：

• 每行的复选框（给它加个类名比如ind-selecionado，方便后续JS选择）
• 存储val_itemservico数值的单元格（加类名val-itemservico）
• 「Calcular」按钮（加个id比如calcular-btn）
• 用来显示求和结果的元素（比如一个<span>，id设为total-result）

示例HTML片段（适配你的场景）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ORÇAMENTO</title>
</head>
<body>
    <h2>ORÇAMENTO</h2>
    <form class="budget-form">
        <!-- 假设你的网格用table实现，可根据实际结构调整 -->
        <table id="budget-table">
            <thead>
                <tr>
                    <th>Selecionar</th>
                    <th>Item/Serviço</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <!-- 示例数据行 -->
                <tr>
                    <td><input type="checkbox" class="ind-selecionado"></td>
                    <td>Manutenção de Notebook</td>
                    <td class="val-itemservico">200.00</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="ind-selecionado"></td>
                    <td>Instalação de Sistema</td>
                    <td class="val-itemservico">120.00</td>
                </tr>
                <!-- 更多数据行... -->
            </tbody>
        </table>

        <button type="button" id="calcular-btn">Calcular</button>
        <div>Total Selecionado: <span id="total-result">0.00</span></div>
    </form>

    <!-- 核心JavaScript逻辑 -->
    <script>
        // 获取按钮和结果展示元素
        const calcularBtn = document.getElementById('calcular-btn');
        const totalResult = document.getElementById('total-result');

        // 给按钮绑定点击事件
        calcularBtn.addEventListener('click', () => {
            let total = 0;
            // 筛选出所有被勾选的复选框
            const checkedRows = document.querySelectorAll('.ind-selecionado:checked');
            
            // 遍历每个选中的复选框，找到对应行的数值并累加
            checkedRows.forEach(checkbox => {
                // 通过复选框定位到所在的表格行
                const row = checkbox.closest('tr');
                // 获取该行的val_itemservico数值文本
                const valorTexto = row.querySelector('.val-itemservico').textContent;
                // 处理数值格式（适配逗号作为小数分隔符的场景）
                const valor = parseFloat(valorTexto.replace(',', '.'));
                // 确保是有效数值再累加
                if (!isNaN(valor)) {
                    total += valor;
                }
            });

            // 格式化结果并展示（保留两位小数，转回逗号分隔格式）
            totalResult.textContent = total.toFixed(2).replace('.', ',');
        });
    </script>
</body>
</html>

关键逻辑解释 #

• document.querySelectorAll('.ind-selecionado:checked')：精准筛选出所有被勾选的复选框
• checkbox.closest('tr')：通过复选框快速定位到它所在的表格行，避免层级查找的麻烦
• 数值格式处理：考虑到葡萄牙语区常用逗号作为小数分隔符，所以做了replace(',', '.')和反向替换的处理，确保数值能正确计算和展示
• 非空校验：用!isNaN(valor)避免无效文本干扰求和结果

适配你现有代码的注意事项 #

如果你的现有HTML结构和示例不同，只需调整对应选择器即可：

• 若复选框用name="ind_selecionado"标识，就把选择器改成input[name="ind_selecionado"]:checked
• 若val_itemservico是通过其他属性标识的，比如data-valor，就把row.querySelector('.val-itemservico').textContent改成row.querySelector('[data-valor]').dataset.valor
• 确保按钮的选择器和你实际的按钮元素匹配

这样点击「Calcular」按钮时，就只会对勾选行的val_itemservico列求和啦！

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