Dev .

一切伟大的思想和行动都有一个微不足道的开始

网页条纹表格的一些操作方法

走来先PO图,一张2008年的条纹表格是这样写的,Excuse me?

2008年怎么说也是DIV+CSS了吧,怎么说也是样式表和HTML分离了吧,

这么写可以瞬间让前端炸毛的不知道吗?

好的,平复一下心情。首先来说一下之前的效果:

1.加载完成时,表格是条纹效果。(已完成,就是上面那张炸毛的写法)

2.鼠标悬浮至该行时该行变色。

3.点击该行,这一行变色。表示被选中,重复点击取消选中。(但前面的复选框不会有改变)

4.点击复选框,指示被选中,但该行不变色。(冷漠)

5.点击全选框,指示被全选,但全部不变色。 以上是我拿到时整个表格的效果,原作者功能的实现如下图。

![](//static.zhelin.me/ghost/content/images/2016/03/6e20f3c1gw1f123b57qzjj20gu0aljtn.jpg)
我看到时当时就懵逼了,因为我对原生JS并不在行,直接说通俗一点就是这代码我看不懂。这是我的问题,确实JS太差劲。怎么办?改!怎么改?用CSS3和jquery。删除原来的代码。

是的,这是我第一种想法,但是我在修改之前并没有注意HTML代码,样式是写在标签里的,一直以为是某一个JS在控制。所以准备将错就错,按照之前的样子就这么写。那么舍弃CSS3,使用jquer。CSS3之后讨论。

那么产品经理需要怎样的效果呢,看下下面的需求:

1.加载完成时,表格是条纹效果。
2.鼠标悬浮至该行时该行变色。
3.点击该行,这一行不变色。
4.点击复选框,指示被选中,该行变色,反之则相反。
5.点击全选框,指示被全选,全部变色,反之则相反。
嗯,有3、4、5点需要改变,首先是悬浮变色的效果,这个不是太难:
$(document).ready(function () { $("#checkList tbody tr:odd").css('background-color', '#fff') //奇数行原色 .mouseover(function () { $(this).css('background-color', 'rgb(236,251,212)') //当鼠标移上变色 }) .mouseout(function () { $(this).css('background-color', '#fff') //移出变会原来颜色 }); $('#checkList tbody tr:even').css('background-color', 'rgb(243,248,247)') //偶数行原色 .mouseover(function () { $(this).css('background-color', 'rgb(236,251,212)') }) .mouseout(function () { $(this).css('background-color', 'rgb(243,248,247)') }); });
其实以上这种写法并不是一个严谨的写法,如果只是单纯的这么一个悬浮变色的效果倒是无所谓,但是加上后面这个效果立马扯淡。

下面就是点击复选框使整行变色:

$(document).ready(function () { $("input[name='linksId']").click(function () { if ($(this).prop("checked")) { $(this).parent().parent().css('background-color', 'rgb(236,251,212)') } });
其实这里的选择器这么写不太好,更好的写法是去判断type。

下面的代码改变整行颜色后,会被上面代码的鼠标移出效果所抵消。当鼠标移出时,颜色会改变成原来的。所以说,上面的写法应该有所判断。该怎么改呢?

![](//static.zhelin.me/ghost/content/images/2016/03/6e20f3c1gw1f123v2ksgfj20k40bugp6.jpg)
是的,为移出效果增加一个判断,判断条件就是复选框是否为勾选状态。

这就是第一种只使用jquer的方法,略显坑,约束太多,并不是太好使,代码量大,也不太符合web标准。那我们就用CSS3来整一整。

首先删除所有tr标签上的背景样式控制,CSS3走起:

#checkList tr:nth-child(odd) {background-color: rgb(243, 248, 247);} #checkList tr:nth-child(even) {background: #fff;} #checkList tr:hover, #checkList tr.checked {background: rgb(236, 251, 212)}
寥寥数行就完成了1、2个需求,那么我们再来看看后面三个需求怎么写
![](//static.zhelin.me/ghost/content/images/2016/03/6e20f3c1gw1f12415vpchj20el07tdhq.jpg)
是的,简单的方法,增加删除class就成,不过这里要注意的是:代码复用性要求高一点,jquery选择器就不能这么局限,比如 input[name=”linksId”]就可以改成input[type=”checkbox”],如果页面中有多个表格的话那么在选择器里加上该表 格的ID或者类就是,如:#id input[type=”checkbox”],这样写复用性高出错率低,还有一点就是在下面的代码中我使用了input[titlc=”全选或反选”],这是一个坑爹的写法,是不太严谨的,第一使用了中文,第二用了title做选择。