上一篇
下一篇
JQuery逐步实现炫丽表格
作者:rainweb 日期:2010-01-06
最近在做项目的时候，要做一个统一样式的表格，同时要让用户有良好的体验，一般分为：隔行变色，鼠标滑过变色，点击tr同时选中复选框（项目中通过checkbox来实现后台操作，所以这个也很重要）且tr变色，大致就3个。其实原理很简单，只要对jquery选择器了解，实现起来不难，下面一步一步进行分解：
第一步：一个普通表格，什么都没有,哈哈
查看demo1
第二步：给表格加了一个mouseover函数
查看demo2
第三步：光有mouseover是不行的，还要一个mouseout函数
查看demo3
第四步：鼠标经过的问题已经解决了，下面就是给偶数行变色
查看demo4
第五步：是对tr的操作了，点击tr同时选中复选框，或者选中checkbox同时tr变得
查看demo5
第六步：checkbox全选同时tr变色【最终效果】
查看demo6
最后一个小bug，选中偶数行时，取消选择，偶数行的样式没有变色了，暂时还为解决，汗~~一个
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
发表评论
click函数
18行：if($(this).hasClass('click')) -> if($(this).children().hasClass('click'))
19行：$(this).removeClass('click') -> $(this).children().removeClass('click')
23行：$(this).removeClass("alt").addClass('click') -> $(this).children().addClass('click')
选择器
64行： tr.alt{} 改为 tr.alt td{}
67行： tr.over{}改为 tr.over td{}