JQuery应用实例——体育馆预约系统的预约功能实现

本文介绍了如何利用jQuery实现体育馆预约功能。通过分析数据库结构，结合场馆和预约日期查询预约信息，利用jQuery动态生成预约表格，展示不同时间段场地的预约状态。通过jQuery处理元素交互，实现点击预约和取消预约的效果，当预约成功时更新表格状态。

之前的项目中涉及到体育馆预约功能的实现，其中每个场馆的开放时间不同，场馆内场地数目不同，借助jQuery实现一个预约功能，效果如下图。这看起来有些类似于人们在电影院购买电影票的操作，根据选择的电影和场次在屏幕上显示影厅中所有座位的空闲情况。

首先分析一下数据库，其中一张场馆表，记录了场馆的名称、对应的运动、开放时间、场地数目等信息，同一种运动可能对应多个场馆，比如东区篮球场、西区篮球场等，它们的开放时间、场地数目可能各不相同。另一张比较重要的表就是预约表了，记录了预约的订单号、用户的id、场馆的id、场地号、预约开始时间、结束时间以及下订单的时间，比如图中这种情况，篮球馆的场地数是10，那么场地的编号就是从1到10。

这便引出了设计的难点，数据库中只是保存了预约的记录，那是不是要经过很繁琐的sql语句查询分别获得每个时间段、每个场地的预约状况才能实现如图所示的效果呢？其实不然，我们只需要查询出当天该场馆所有预约的记录并以Json格式数据返回即可，剩下的工作由jQuery实现。

表格单元所表示的对应时段场地情况有四种状态：可预约（此时未选中）、过期、已被占用、选中。对应css样式如下：

tr .occupied {
	background: #ff0;
}
tr .outtime {
	background: #bbb;
}
tr .useable {
	background: #fff;
}
tr .outtime:hover,tr .occupied:hover {
	cursor