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
热门阅读
- office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
- 如何安装mysql8.0
阅读:31
- Word快速设置标题样式步骤详解
阅读:28
- 20+道必知必会的Vue面试题(附答案解析)
阅读:37
- HTML如何制作表单
阅读:22
- 百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
- ET文件格式和XLS格式文件之间如何转化?
阅读:24
- react和vue的区别及优缺点是什么
阅读:121
- 支付宝人脸识别如何关闭?
阅读:21
- 腾讯微云怎么修改照片或视频备份路径?
阅读:28