无法通过JQuery无刷新更新单元格ID的技术问题

核心问题出在AJAX回调函数的上下文丢失：你在success回调里使用的$(this)不再指向被点击的.submitChange单元格，导致修改ID的代码根本没有执行，所以页面看不到状态变化，只有刷新后从数据库重新读取数据才会显示正确的单元格颜色。

1. 修复jQuery中的上下文问题 #

在点击事件触发时，先保存当前被点击单元格的引用，后续在AJAX回调中直接使用这个引用操作DOM：

$(document).ready(function() {
    $('.submitChange').click(function() {
        // 提前保存当前点击的单元格DOM引用
        const $cell = $(this);
        const cellId = $cell.attr('id');
        const eventId = $cell.data('eventid');
        const employeeId = $cell.data('employeeid');
        const action = cellId === 'green-cell' ? 'remove' : 'add';

        $.ajax({
            url: "includes/ajax_request.php",
            method: "POST",
            data: {
                action: action,
                eventId: eventId,
                employeeId: employeeId
            },
            success:function(response){
                if (response === 'removed') {
                    $cell.attr('id', 'yellow-cell');
                    alert("Employee has been removed from event!");
                } else {
                    $cell.attr('id', 'green-cell');
                    alert("Employee has been added to event!");
                }  
            }
        })
    })
});

2. 简化DOM操作（可选） #

不需要先执行removeAttr('id')再赋值新ID，直接用attr('id', 新值)即可，ID属性会被直接覆盖。

3. 修复SQL注入漏洞（重要） #

你的PHP代码直接将POST参数拼接到SQL语句中，存在严重的SQL注入风险，必须改用预处理语句：

<?php
include("connect.php");

// 校验请求参数完整性
if (!isset($_POST['action'], $_POST['eventId'], $_POST['employeeId'])) {
    exit("Invalid request");
}

$action = $_POST['action'];
// 强制转为整数，避免字符串注入
$eventId = (int)$_POST['eventId'];
$employeeId = (int)$_POST['employeeId'];

if ($action === 'remove') {
    $sql = "DELETE FROM Workers WHERE event = ? AND employee = ?";
    $stmt = $smeConn->prepare($sql);
    $stmt->bind_param("ii", $eventId, $employeeId);
    $stmt->execute();
    echo "removed";
} elseif ($action === 'add') {
    $sql = "INSERT INTO Workers (event, employee) VALUES (?, ?)";
    $stmt = $smeConn->prepare($sql);
    $stmt->bind_param("ii", $eventId, $employeeId);
    $stmt->execute();
    echo "added";
} else {
    exit("Invalid action");
}
?>

• 尽量避免用ID控制样式，改用CSS类更灵活：定义.green-cell和.yellow-cell类，然后用$cell.toggleClass('green-cell yellow-cell')一键切换样式，无需修改ID。
• 替换掉alert提示，改用页面内的轻量提示元素（比如固定在页面角落的消息条），提升用户体验。

内容的提问来源于stack exchange，提问作者b-rad90