开篇
公司有一个项目是一个表格模式的,表头是日期,30天,左侧的标题是房间名,构成一个30*N的巨大表格,显示如下
现在产品有一个需求,要求每个周六的格式的右边框颜色醒目出来,需求如下
每个格式都动态生成出来的,先生成每一行,再生成每个格子,拿到这个需求,我的第一反应是用JS来控制,是周六的加个特殊样式
JS解决方案
这样确实能完成产品的需要,但是本身这个项目就因为数据量过大,从而存在了大量的计算,所以我们要尽量的减负,而不是增负,在抓掉了N根头发之后,我想到了,可以用CSS3的选择器去解决这个问题.
CSS3解决方案
CSS3的解决方案是 (an + b)选择器,我们知道起始的日期是星期几,那么我们可以给父级加一个标志性的样式
我们利用日来做为下标,获取第一天是哪天,这样才能知道我们后面的偏移量,我们在样式里加入
根据初始日来设置(an + b)中b的偏移量,这样,我们就通过CSS3的选择器来完成了JS的工作,解决了JS里的计算开销.
来看下效果
手动调整下第一天的日期
OK,很完美!
