如何通过JS更新CSS实现预订系统表格单元格的已预订状态标记？

1. 日历页：传递选中时段标识到确认页 #

修改日历单元格的HTML，把时段标识（如Tri6）通过URL参数传递给确认页，同时优化点击逻辑避免事件冲突：

<td class="reserve_time Tri6" colspan="4" onClick="tripod('6PM', '7PM','Tripod and Foldable Studio'); window.location.href='confirmation?slot=Tri6';">
  6PM-7PM (Tripod and Foldable Studio)
</td>

注：移除内部<a>标签，直接通过JS跳转；给单元格添加Tri6类作为唯一标识，方便后续查找。

2. 确认页：保存预订标识到本地存储 #

修改updateReserved函数，从URL参数中获取时段标识，存入本地存储后跳转回日历页：

function updateReserved() {
  // 提取URL中的slot参数
  const urlParams = new URLSearchParams(window.location.search);
  const slot = urlParams.get('slot');
  
  if (slot) {
    // 读取已预订列表，不存在则初始化空数组
    let reservedSlots = JSON.parse(localStorage.getItem('reservedSlots')) || [];
    // 避免重复添加
    if (!reservedSlots.includes(slot)) {
      reservedSlots.push(slot);
      localStorage.setItem('reservedSlots', JSON.stringify(reservedSlots));
    }
  }
  
  location.href = "calender";
}

3. 日历页：加载时自动标记已预订时段 #

在日历页添加页面加载事件，读取本地存储的已预订列表，给对应单元格添加reserved类：

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', function() {
  const reservedSlots = JSON.parse(localStorage.getItem('reservedSlots')) || [];
  
  reservedSlots.forEach(slot => {
    // 找到对应标识的单元格
    const cell = document.querySelector(`.reserve_time.${slot}`);
    if (cell) {
      cell.classList.add('reserved');
    }
  });
});

// 保留原tripod函数（处理预订信息逻辑）
function tripod(timeStart, timeEnd, equipment) {
  // 可在此保存预订的时间/设备信息，比如存入本地存储
  localStorage.setItem('currentReservation', JSON.stringify({
    start: timeStart,
    end: timeEnd,
    equipment: equipment
  }));
}

4. 优化CSS（可选） #

调整reserved类的样式，通过选择器优先级覆盖原有样式，避免使用!important：

.reserve_time.reserved {
  background: var(--clr-dark);
  pointer-events: none;
  cursor: not-allowed;
  font-size: 100%;
  text-decoration: none;
  border: solid;
}

核心逻辑说明 #

• 跨页面数据传递：用URL参数传递当前选中的时段标识，用localStorage持久化已预订列表（后续如需后端同步，可替换为API调用）。
• 状态自动更新：日历页每次加载时读取本地存储，自动标记已预订的单元格。
• 事件冲突解决：移除单元格内的<a>标签，直接用JS跳转，防止重复触发跳转逻辑。

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