如何使用jQuery获取表格当前行指定列的输入值？现有代码运行异常

问题分析 #

• 事件绑定对象错误：你将keyup事件绑定在整个表格#tblEntry上，此时回调函数里的$(this)指向的是表格元素本身，调用closest('tr')自然找不到对应的行，无法获取单元格值
• 重复声明变量：两次使用var monHrs声明变量，后一次赋值会覆盖前一次的结果
• 选择器使用不合理：如果后续有新增行的需求，用id选择器会出现id重复冲突，无法正常取值
• 语法错误：事件回调函数未正确闭合，缺少对应的})符号

修正后的代码 #

JS代码 #

<script>
// 事件委托给表格内的.empHrs输入框，后续新增行也能正常触发
$('#tblEntry').on('keyup', '.empHrs', function (e) {
    // 此时$(this)指向触发输入的输入框，可定位到当前所在行
    const currentRow = $(this).closest('tr');
    // 按name属性选择对应列的输入框，避免id冲突问题
    const monHrs = currentRow.find('input[name="MondayNetHrs"]').val();
    const tueHrs = currentRow.find('input[name="TuesdayNetHrs"]').val();
    
    // 此处添加自己的业务逻辑即可，以下是统计周总时长的示例代码
    const weekDays = ['SundayNetHrs', 'MondayNetHrs', 'TuesdayNetHrs', 'WednesdayNetHrs', 'ThursdayNetHrs', 'FridayNetHrs', 'SaturdayNetHrs'];
    let totalHrs = 0;
    weekDays.forEach(day => {
        const dayVal = Number(currentRow.find(`input[name="${day}"]`).val() || 0);
        totalHrs += dayVal;
    });
    currentRow.find('input[name="NetHrsPerWeek"]').val(totalHrs);
})
</script>

HTML代码 #

无需改动，保持原有代码即可。

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