网页条纹表格的一些操作方法
走来先PO图，一张2008年的条纹表格是这样写的，Excuse me？
2008年怎么说也是DIV+CSS了吧，怎么说也是样式表和HTML分离了吧，
这么写可以瞬间让前端炸毛的不知道吗？
好的，平复一下心情。首先来说一下之前的效果：
1.加载完成时，表格是条纹效果。（已完成，就是上面那张炸毛的写法）
2.鼠标悬浮至该行时该行变色。
3.点击该行，这一行变色。表示被选中，重复点击取消选中。（但前面的复选框不会有改变）
4.点击复选框，指示被选中，但该行不变色。（冷漠）
5.点击全选框，指示被全选，但全部不变色。 以上是我拿到时整个表格的效果，原作者功能的实现如下图。
我看到时当时就懵逼了，因为我对原生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。
下面的代码改变整行颜色后，会被上面代码的鼠标移出效果所抵消。当鼠标移出时，颜色会改变成原来的。所以说，上面的写法应该有所判断。该怎么改呢？
是的，为移出效果增加一个判断，判断条件就是复选框是否为勾选状态。
这就是第一种只使用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个需求，那么我们再来看看后面三个需求怎么写
是的，简单的方法，增加删除class就成，不过这里要注意的是：代码复用性要求高一点，jquery选择器就不能这么局限，比如 input[name=”linksId”]就可以改成input[type=”checkbox”]，如果页面中有多个表格的话那么在选择器里加上该表 格的ID或者类就是，如：#id input[type=”checkbox”]，这样写复用性高出错率低，还有一点就是在下面的代码中我使用了input[titlc=”全选或反选”]，这是一个坑爹的写法，是不太严谨的，第一使用了中文，第二用了title做选择。