首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

jquery 控制表格或者列表 偶数行的颜色

作者:  时间: 2011-06-17

demo7:table滑过变色,隔行变色.
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
在效果上,我又加了点击 某行 变色:
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}).click(function(){ //移除该行的class
$(this).toggleClass("click").removeClass("alt")})//点击变色,注意:因为有隔行变色,所以这里必须在触发toggleClass时,remove("alt").
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
说到这里 ,不得不说一下 toggle与toggleClass区别:
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}).toggle(function(){ $(this).addClass("click"); },function(){ $(this).removeClass("click");}).unbind("click")
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
可以发现:
toggleClass:可以发现超连接还是可以连接的,没有被 toggle和click占用
toggle:可以发现超连接已经不可以用了,所以说toggle不适合这种情况。不过可以把click解绑(unbind("click")),代码量好象比click结合toggleClass多,所以我选择的是toggleClass.

来自: http://hi.baidu.com/hbjinzhao/blog/item/7609123b481d33e714cecb2c.html