jQuery实现table隔行换色和鼠标经过变色的两种方法
更新时间：2014年06月15日 10:03:22 投稿：whsnow
这篇文章主要介绍jQuery实现table隔行换色和鼠标经过变色的两种方法,需要的朋友可以参考下
一、隔行换色
$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");
或者一行搞定：
$("table tr:nth-child(odd)").css("background-color","#eeeeee");
:nth-child 匹配其父元素下的第N个子或奇偶元素
二、鼠标经过变色
$("tr").live({
mouseover:function(){
$(this).css("background-color","#eeeeee");
},
mouseout:function(){
$(this).css("background-color","#ffffff");
}
})
或者
$("tr").bind("mouseover",function(){
$(this).css("background-color","#eeeeee");
})
$("tr").bind("mouseout",function(){
$(this).css("background-color","#ffffff");
})
当然live()和bind()都可以同时绑定多个事件或分开。
复制代码 代码如下:
$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");
或者一行搞定：
复制代码 代码如下:
$("table tr:nth-child(odd)").css("background-color","#eeeeee");
:nth-child 匹配其父元素下的第N个子或奇偶元素
二、鼠标经过变色
复制代码 代码如下:
$("tr").live({
mouseover:function(){
$(this).css("background-color","#eeeeee");
},
mouseout:function(){
$(this).css("background-color","#ffffff");
}
})
或者
复制代码 代码如下:
$("tr").bind("mouseover",function(){
$(this).css("background-color","#eeeeee");
})
$("tr").bind("mouseout",function(){
$(this).css("background-color","#ffffff");
})
当然live()和bind()都可以同时绑定多个事件或分开。
您可能感兴趣的文章:
- jquery实现的鼠标拖动排序Li或Table
- jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
- jquery实现table鼠标经过变色代码
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- jQuery插件dataTables添加序号列的方法
- JQuery动态给table添加、删除行 改进版
- jquery获取table中的某行全部td的内容方法
- jquery遍历table的tr获取td的值实现方法
- jQuery操作表格（table）的常用方法、技巧汇总
- jQuery实现获取table中鼠标click点击位置行号与列号的方法
相关文章
下面小编就为大家带来一篇使用JQuery选择HTML遍历函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了jquery选择器排除某个DOM元素的方法,也就是在选中的一些元素中,过滤一些不需要的,使用jquery not选择器实现,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery Validate 校验多个相同name的方法,需要的朋友可以参考下2017-05-05
这篇文章主要为大家详细介绍了jquery实现界面点击按钮弹出悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
删除HTML元素可以使用remove及empty，下面有关这两个方法的使用将以示例的方式为大家介绍下2014-08-08
这篇文章主要介绍了jQuery表单验证的方法,结合简单实例形式分析了jQuery针对表单必填项进行验证的方法,需要的朋友可以参考下2016-10-10
easyui combotree加载静态数据问题（选不上）解决方法
这篇文章主要介绍了easyui combotree加载静态数据问题,选不上）2016-12-12
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
这篇文章主要介绍了从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
使用CSS和jQuery模拟select并附提交后取得数据的代码
使用CSS和jQuery模拟select并实现提交后取得数据，详细实现及截图如下，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了jQuer输入框插件封装方法，这样可以提高程序员的开发效率，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最新评论