如何实现HTML表格HolidayHrs、TimeOffHrs列的编辑变更事件JS代码

针对HolidayHrs、TimeOffHrs两列编辑完成后触发console.log("Edited")的需求，最适配Razor动态渲染场景的方案是采用事件委托模式，避免逐单元格绑定带来的冗余代码、以及Razor重绘DOM后事件失效的问题。

前置标记配置 #

在Razor渲染表格列的代码中，给需要监听的两列单元格加上统一的自定义识别属性，不要靠列索引定位（列顺序调整时极易出现绑定错位），参考写法：

// 表格行单元格渲染片段
<td class="attendance-data-cell">
    @item.RegularWorkHrs
</td>
// 需要监听的HolidayHrs列单元格
<td class="attendance-data-cell" data-track-col="HolidayHrs">
    @item.HolidayHrs
</td>
// 需要监听的TimeOffHrs列单元格
<td class="attendance-data-cell" data-track-col="TimeOffHrs">
    @item.TimeOffHrs
</td>

如果单元格是通过内嵌<input>实现编辑，直接把data-track-col属性加在内嵌input元素上即可；如果是给单元格加contenteditable="true"实现直接编辑，属性加在td标签上即可。

核心JS实现代码 #

绑定在表格的最外层容器上，哪怕Razor后续动态增删、重绘表格行，事件逻辑依然可以正常生效：

// 获取attendance表格的根容器，替换为你实际页面的表格ID
const attendanceTable = document.querySelector("#attendance-table");

// 监听内嵌input场景的编辑完成事件
attendanceTable.addEventListener('change', function(e) {
    // 过滤触发源：仅响应带目标标记的元素，确认值发生变更
    const triggerEl = e.target;
    const isTrackedTarget = triggerEl.hasAttribute('data-track-col') 
        && ['HolidayHrs', 'TimeOffHrs'].includes(triggerEl.dataset.trackCol);
    
    if (isTrackedTarget) {
        console.log("Edited");
        // 可在此扩展后续业务逻辑：比如数值合法性校验、更新后端数据、同步汇总计算
    }
});

// 监听contenteditable单元格的编辑完成事件
attendanceTable.addEventListener('blur', function(e) {
    const triggerEl = e.target;
    const isTrackedEditableCell = triggerEl.hasAttribute('data-track-col')
        && triggerEl.getAttribute('contenteditable') === "true";
    
    if (!isTrackedEditableCell) return;
    // 比对初始缓存值，仅当数值真正发生变化时才触发
    const cachedOriginalVal = triggerEl.dataset.originalValue;
    const currentEditVal = triggerEl.innerText.trim();
    
    if (cachedOriginalVal !== currentEditVal) {
        console.log("Edited");
        // 更新缓存的最新值，避免下次失焦重复触发
        triggerEl.dataset.originalValue = currentEditVal;
    }
}, true);

常见避坑点 #

• 不要直接使用列索引（比如“表格第5、第6列”）做事件绑定，后续Razor页面调整列顺序时，事件会直接绑定到错误的列上
• 不要逐单元格写内联onchange事件，当表格数据量较大时，冗余的行内事件会拉低页面渲染性能，事件委托模式只需要绑定一次即可覆盖所有目标列元素
• 不要在input输入过程的事件里直接写业务提交逻辑，仅把input事件用于实时数值校验，真正的编辑完成触发逻辑要绑定在change/blur阶段，避免无效触发

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