当class为emphrs的数字输入框值变更时，如何计算所有同类输入框的总和

调整逻辑说明 #

• 移除原代码中仅查询当前行同类输入框的限制，直接全局匹配所有class=emphrs的数字输入框遍历求和
• 对输入值默认处理：空值、非数字输入统一按0计算，避免求和结果出现NaN
• 总和存储到全局变量totalEmphrs，可直接在其他业务逻辑中直接读取使用

完整调整后代码 #

<tbody>
@if (Model.Emplist != null){
    for (var i = 0; i < Model.Emplist.Count; i++){
    <tr>
        <td style="width:10%;text-align:center;vertical-align:middle;">@Model.Emplist[i].EmployeeName</td>
        <td >
            <div class="showinline">
                @Html.TextBoxFor(m => m.attendanceLogList[i].NormalHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,@Value = Model.attendanceLogList[i].NormalHrs, @type = "number", onchange = "CalculateTotal(this);" })
            </div>
        </td>
        <td>
            <div class="showinline">
                @Html.TextBoxFor(m => m.attendanceLogList[i].DayOffHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,@Value = Model.attendanceLogList[i].DayOffHrs, @type = "number", onchange = "CalculateTotal(this);" })
            </div>
        </td>
        <td>
            @Html.TextBoxFor(m => m.attendanceLogList[i].HolidayHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,@Value = Model.attendanceLogList[i].HolidayHrs, @type = "number", onchange = "CalculateTotal(this);" })
        </td>
    </tr>
    }
}
</tbody>
<script>
// 全局变量存储所有emphrs输入框的总和，可在其他逻辑中直接调用
var totalEmphrs = 0;
function CalculateTotal(element) {
    totalEmphrs = 0;
    // 全局遍历所有带有emphrs类的输入框求和
    $(".emphrs").each(function () {
        var currentVal = parseFloat($(this).val()) || 0;
        totalEmphrs += currentVal;
    });
    // 此处可添加总和输出、页面赋值等自定义后续逻辑
    console.log("总时长计算结果：", totalEmphrs);
}
</script>

可选优化说明 #

如果仅需要统计当前表格内的emphrs输入框，避免统计到页面其他区域同class的输入框，可将选择器调整为更精准的范围，比如$("table#你的表格ID .emphrs")即可。

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