优化AJAX交互：实现页面无刷新样式更新与动态事件绑定

<?php
// 假设 $con 是数据库连接，$_SESSION['recipient_id'] 已设置
// ... (数据库连接和错误处理部分与原代码类似) ...

$sql = "SELECT * FROM restaurant";
$res = mysqli_query($con, $sql);

while ($row = mysqli_fetch_assoc($res)) {
    $restaurantID = $row['id'];
    $sql_meals = "SELECT * FROM meal WHERE restaurant_id=" . $restaurantID;
    $meals_res = mysqli_query($con, $sql_meals);

    if (mysqli_num_rows($meals_res) > 0) {
        // 每个餐厅生成一个表格
        echo '<table id="mealsList-' . $restaurantID . '">'; // 为每个餐厅的表格也添加唯一ID
        echo '<thead>';
        echo '<tr><caption style="text-align: left;">' . htmlspecialchars($row['name']) . '</caption></tr>';
        echo '<tr><th>Meals</th><th>Status</th><th>Options</th></tr>';
        echo '</thead>';
        echo '<tbody>';

        while ($meal_row = mysqli_fetch_assoc($meals_res)) {
            $mealId = $meal_row['id'];
            $mealName = htmlspecialchars($meal_row['name']);
            $mealQty = $meal_row['qty'];

            $sql_reservation = "SELECT * FROM reservation WHERE meal_id=" . $mealId . " AND recipient_id=" . $_SESSION['recipient_id'];
            $res_reservation = mysqli_query($con, $sql_reservation);
            $isReserved = mysqli_num_rows($res_reservation) > 0;

            echo '<tr id="item-' . $mealId . '">'; // 关键：为每行设置唯一ID
            echo '<td class="mealName">';
            if ($isReserved) {
                // 已预订的餐品名称链接默认带有绿色背景
                echo '<a class="highlight-green" href="MealInfo.php?mealID=' . $mealId . '">' . $mealName . '</a>';
            } else {
                echo '<a href="MealInfo.php?mealID=' . $mealId . '">' . $mealName . '</a>';
            }
            echo '</td>';

            echo '<td class="mealStatus">';
            if ($isReserved) {
                echo 'Reserved';
            } else {
                echo ''; // 未预订时状态为空
            }
            echo '</td>';

            echo '<td class="mealOptions">';
            if ($isReserved) {
                // 已预订的显示“Remove”按钮
                echo '<button class="btn btn-remove">Remove</button>';
            } elseif ($mealQty > 0) {
                // 未预订且有库存的显示“Reserve”按钮
                echo '<button class="btn btn-reserve">Reserve</button>';
            } else {
                // 无库存显示“Meal not available”
                echo 'Meal not available';
            }
            echo '</td>';
            echo '</tr>';
        }
        echo '</tbody>';
        echo '</table>';
    }
}
?>

#mealsList { /* 如果所有餐品在一个大表格里，可以只用一个ID */
  width: 340px;
  border-collapse: collapse; /* 更好的表格样式 */
}

/* 针对每个餐厅的表格，如果PHP生成了多个表格 */
table[id^="mealsList-"] {
    width: 340px;
    margin-bottom: 20px; /* 增加表格间距 */
    border-collapse: collapse;
}

table[id^="mealsList-"] th, table[id^="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: #f44336; /* 移除按钮红色 */
  color: white;
}

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

$(function() { // 等同于 $(document).ready(function(){...})，是jQuery的简写形式

  // 辅助函数：处理移除操作
  function removeItem(id) {
    $.get("rmov.php", {
        classID: id,
        html: "success" // 假设后端返回 "success" 表示操作成功
      },
      function(response) {
        // 实际应用中应根据response内容判断是否成功，这里简化处理
        if (response.trim() === "success") { // 使用 .trim() 避免空白字符影响判断
          console.log("Remove Successful for item: " + id);
          // 移除餐品名称的绿色高亮
          $("#item-" + id + " .mealName a").removeClass("highlight-green highlight-yellow big");
          // 清空状态文本
          $("#item-" + id + " .mealStatus").html("");
          // 切换按钮：从“Remove”变为“Reserve”，并切换类
          $("#item-" + id + " .mealOptions .btn")
            .html("Reserve")
            .removeClass("btn-remove")
            .addClass("btn-reserve");
        } else {
            alert("The remove operation was failed!"); // 提示失败
        }
      });
  }

  // 辅助函数：处理预订操作
  function reserveItem(id) {
    $.get("rsv.php", {
        classID: id,
        html: "success" // 假设后端返回 "success" 表示操作成功
      },
      function(response) {
        // 实际应用中应根据response内容判断是否成功，这里简化处理
        if (response.trim() === "success") {
          console.log("Reserve Successful for item: " + id);
          // 为餐品名称添加黄色高亮和大字体
          $("#item-" + id + " .mealName a").addClass("highlight-yellow big");
          // 更新状态文本
          $("#item-" + id + " .mealStatus").html("Reserved");
          // 切换按钮：从“Reserve”变为“Remove”，并切换类
          $("#item-" + id + " .mealOptions .btn")
            .html("Remove")
            .removeClass("btn-reserve")
            .addClass("btn-remove");
        } else {
            alert("The reserve operation was failed!"); // 提示失败
        }
      });
  }

  // 使用事件委托绑定点击事件到所有表格（