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: not-allowed;
}
tr .useable:hover {
	cursor: pointer;
	background: #30abc1;
}
tr .useable:active {
	background: #0072ac;
}
tr .selected {
	background: #30abc1 !i
  • 8
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值