jQuery Datatable更新记录后，如何实现首次失焦时为单元格加CSS

这问题我之前也碰到过，核心是两个点：回调函数里的this指向不对，还有重复绑定事件导致触发延迟，咱们一步步来修复：

问题分析 #

1. 你在$.post的回调里用$(this)失效，是因为回调函数的上下文已经变了——这里的this不再指向触发blur的那个.editForecast元素，而是指向jQuery对象本身。
2. 你的changeColor函数又重新绑定了一次blur事件，导致第一次blur触发更新，第二次blur才触发样式变更，这就是为什么需要两次操作才生效。

修复方案 #

直接在blur事件里提前保存目标元素的引用，然后在回调里直接操作它就行，不需要额外绑定事件：

$('#example1').on('blur', 'tr > td > .editForecast', function(e) {
    e.preventDefault();
    // 提前保存当前触发事件的元素引用
    var $target = $(this);
    var forecastnewval = $target.val();
    
    $.post('api/inlineEditProcess.php', {forecastnewval:forecastnewval}, function(data) {
        // 直接用保存好的$target操作样式
        $target.css('background-color', 'green');
        // 可选：如果想要一段时间后恢复原样式，可以加个定时器
        setTimeout(function() {
            $target.css('background-color', '');
        }, 2000); // 2秒后恢复
    });
});

更优雅的写法（推荐） #

直接写行内CSS不够灵活，建议定义一个CSS类，然后用addClass来添加样式，方便后续修改：

/* 先在样式表定义类 */
.success-highlight {
    background-color: #d4edda; /* 柔和的绿色，比纯绿更友好 */
    transition: background-color 0.3s ease; /* 加个过渡动画更丝滑 */
}

然后修改JS代码：

$('#example1').on('blur', 'tr > td > .editForecast', function(e) {
    e.preventDefault();
    var $target = $(this);
    var forecastnewval = $target.val();
    
    $.post('api/inlineEditProcess.php', {forecastnewval:forecastnewval}, function(data) {
        $target.addClass('success-highlight');
        // 定时移除样式，提示用户后恢复正常
        setTimeout(function() {
            $target.removeClass('success-highlight');
        }, 2500);
    });
});

额外注意 #

记得把之前定义的changeColor函数删掉，避免它重复绑定blur事件干扰逻辑。

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