JQuery逐步实现炫丽表格

   最近在做项目的时候，要做一个统一样式的表格，同时要让用户有良好的体验，一般分为：隔行变色，鼠标滑过变色，点击tr同时选中复选框（项目中通过checkbox来实现后台操作，所以这个也很重要）且tr变色，大致就3个。其实原理很简单，只要对jquery选择器了解，实现起来不难，下面一步一步进行分解：

第一步：一个普通表格，什么都没有,哈哈
查看demo1

第二步：给表格加了一个mouseover函数
查看demo2

第三步：光有mouseover是不行的，还要一个mouseout函数
查看demo3

第四步：鼠标经过的问题已经解决了，下面就是给偶数行变色
查看demo4

第五步：是对tr的操作了，点击tr同时选中复选框，或者选中checkbox同时tr变得
查看demo5

第六步：checkbox全选同时tr变色【最终效果】
查看demo6

最后一个小bug，选中偶数行时，取消选择，偶数行的样式没有变色了，暂时还为解决，汗~~一个  

demo下载

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: