使用jQuery AJAX实现动态页面更新：样式切换与按钮状态管理的最佳实践

<?php
// ... 数据库连接和查询代码 ...

while($row = mysqli_fetch_assoc($meals)){
    $mealId = $row['id'];
    $mealName = $row['name'];
    $isReserved = /* 根据数据库查询判断是否已预订 */;

    echo '<tr id="item-' . $mealId . '">'; // 为每一行设置唯一的ID
    echo '<td class="mealName">';
    echo '<a class="' . ($isReserved ? 'highlight-green' : '') . '" href="MealInfo.php?mealID=' . $mealId . '">' . $mealName . '</a>';
    echo '</td>';
    echo '<td class="mealStatus">';
    echo $isReserved ? 'Reserved' : ''; // 初始状态显示
    echo '</td>';
    echo '<td class="mealOptions">';
    if ($isReserved) {
        echo '<button class="btn btn-remove">Remove</button>'; // 预订状态显示移除按钮
    } else {
        echo '<button class="btn btn-reserve">Reserve</button>'; // 未预订状态显示预订按钮
    }
    echo '</td>';
    echo '</tr>';
}
// ... 其他代码 ...
?>

#mealsList {
  width: 340px;
  border-collapse: collapse; /* 优化表格显示 */
}

#mealsList th, #mealsList td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.highlight-green {
  background-color: #00ff00; /* 预订成功的背景色 */
}

.highlight-yellow {
  background-color: yellow; /* 另一种高亮状态 */
}

.big {
  font-size: 200%; /* 字体放大效果 */
}

/* 按钮基础样式 */
.btn {
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.btn-remove {
  background-color: #ff4d4d; /* 移除按钮的样式 */
  color: white;
}

.btn-reserve {
  background-color: #4CAF50; /* 预订按钮的样式 */
  color: white;
}

$(function() { // $(function() { ... }); 是 $(document).ready(function() { ... }); 的简写

  // 处理移除操作的函数
  function removeItem(mealId) {
    $.get("rmov.php", {
        classID: mealId,
        html: "success" // 示例中传入的参数，根据实际后端接口调整
      },
      function(response) {
        // 假设后端返回 "success" 表示操作成功
        if (response === "success") {
          console.log("移除成功");
          // 定位到对应的行，并更新其子元素的样式和内容
          const $row = $("#item-" + mealId);
          $row.find(".mealName a").removeClass("highlight-green highlight-yellow big"); // 移除所有高亮和字体放大样式
          $row.find(".mealStatus").html(""); // 清空状态文本
          // 切换按钮：文本变为“Reserve”，类名从 btn-remove 变为 btn-reserve
          $row.find(".mealOptions .btn").html("Reserve").toggleClass("btn-remove btn-reserve");
        } else {
          alert("移除操作失败！");
        }
      }
    );
  }

  // 处理预订操作的函数
  function reserveItem(mealId) {
    $.get("rsv.php", {
        classID: mealId,
        html: "success" // 示例中传入的参数，根据实际后端接口调整
      },
      function(response) {
        // 假设后端返回 "success" 表示操作成功
        if (response === "success") {
          console.log("预订成功");
          // 定位到对应的行，并更新其子元素的样式和内容
          const $row = $("#item-" + mealId);
          $row.find(".mealName a").addClass("highlight-yellow big"); // 添加高亮和字体放大样式
          $row.find(".mealStatus").html("Reserved"); // 设置状态文本
          // 切换按钮：文本变为“Remove”，类名从 btn-reserve 变为 btn-remove
          $row.find(".mealOptions .btn").html("Remove").toggleClass("btn-remove btn-reserve");
        } else {
          alert("预订操作失败！");
        }
      }
    );
  }

  // 使用事件委托绑定点击事件
  // 将事件绑定到 #mealsList 表格上，当点击 .btn-remove 或 .btn-reserve 时触发
  $("#mealsList").on("click", ".btn-remove", function(event) {
    // 获取当前点击按钮所在行的ID，并提取餐点ID
    const mealId = $(this).closest("tr").attr("id").split("-")[1];
    removeItem(mealId);
  });

  $("#mealsList").on("click", ".btn-reserve", function(event) {
    // 获取当前点击按钮所在行的ID，并提取餐点ID
    const mealId = $(this).closest("tr").attr("id").split("-")[1];
    reserveItem(mealId);
  });

});