HTML表格点击TD改色并通过AJAX写库时仅最后行生效问题求助

• 你把<script>标签写在了PHP遍历订单的循环体内，每输出一行订单就会重新定义一次getSelected、changeBackground函数，后定义的函数会覆盖之前的，最终全局只剩最后一次定义的版本，getSelected里硬编码的订单ID永远是最后一行的ID，所以不管点击哪一行，操作的都是最后一行的元素。
• 现有逻辑冗余：点击TD时已经传入了当前元素的ID，完全不需要通过类名批量获取元素遍历。
• 原有AJAX请求没有传递对应订单ID，后端无法判断要更新哪条订单的状态。

第一步：调整PHP输出的TD代码，移除行内点击事件（更易维护） #

<!-- 循环输出TD的时候只输出结构即可，不需要绑定onclick -->
<td 
  id="<?php echo $row['order_id']; ?>" 
  class="order-item white" 
  data-order-id="<?php echo $row['order_id']; ?>"
>
  <?php echo $row['order_id']; ?>
</td>

注意不要把<script>标签放在循环体里，JS代码只需要写一次，放在页面底部即可

第二步：替换原有JS代码，使用事件委托实现需求 #

<script>
// 监听所有.order-item的点击事件，只绑定一次即可
$(document).on('click', '.order-item', function() {
  const $currentTd = $(this);
  const orderId = $currentTd.data('order-id');
  let newColorCode, oldClass, newClass;

  // 匹配当前颜色，获取要切换的状态
  if ($currentTd.hasClass('white')) {
    oldClass = 'white';
    newClass = 'red';
    newColorCode = 2;
  } else if ($currentTd.hasClass('red')) {
    oldClass = 'red';
    newClass = 'green';
    newColorCode = 3;
  } else if ($currentTd.hasClass('green')) {
    oldClass = 'green';
    newClass = 'pink';
    newColorCode = 4;
  } else if ($currentTd.hasClass('pink')) {
    oldClass = 'pink';
    newClass = 'yellow';
    newColorCode = 5;
  } else if ($currentTd.hasClass('yellow')) {
    oldClass = 'yellow';
    newClass = 'white';
    newColorCode = 1;
  }

  // 切换样式
  $currentTd.removeClass(oldClass).addClass(newClass);

  // 提交更新到后端，同时传递订单ID
  $.ajax({
    type: "POST",
    url: 'update_color.php',
    data: {
      color: newColorCode,
      order_id: orderId // 必须传订单ID，后端才能更新对应数据
    },
    success: function (data) {
      console.log(data);
    },
    error: function() {
      // 可选：请求失败时回滚样式
      $currentTd.removeClass(newClass).addClass(oldClass);
      alert('状态更新失败，请重试');
    }
  });
});
</script>

可以把颜色和状态码的映射关系单独存成对象，减少冗余的if判断：

const statusMap = {
  white: { next: 'red', code: 2 },
  red: { next: 'green', code: 3 },
  green: { next: 'pink', code: 4 },
  pink: { next: 'yellow', code: 5 },
  yellow: { next: 'white', code: 1 }
};

后续直接通过statusMap[oldClass]就能拿到对应的新类和状态码。

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