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点击位置行号与列号的方法
相关文章
input:checkbox多选框实现单选效果跟radio一样
checkbox是多选，怎么才能让他变成单选，效果跟radio一样呢，本菜鸟就自己写了个小程序，代码很简单2014-06-06
有时候需要设置iframe的src属性，下面是基于jquery的实现代码。2010-11-11
我们用一个语句就让下面五个div显示成功，具体实现如下，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了jQuery中的$.ajax()方法的应用，需要的朋友可以参考下2014-05-05
利用jQuery来实现，其实就几行代码的事。即便如此，由于js语言的思维方式，还是一直没有把握好，加上一个css的问题，导致弄了好久才出来效果。2009-12-12
jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等，本文整理了一些dom操作的常用方法，感兴趣的朋友可以参考下哈2013-06-06
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
这篇文章主要为大家详细介绍了解决jQuery上传插件Uploadify出现Http Error 302错误的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
项目中应用jQuery解析读取XML语言配置文件来实现语言的调度。这是jQuery解析读取XML文件功能的测试源码，现拿出来分享。2009-10-10
jquery对象和javascript对象即DOM对象相互转换
对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，使用[index]和.get(index)可以转为DOM对象2014-08-08
在本篇文章里小编给大家分享了关于Jquery获取radio选中值实例总结内容，有兴趣的朋友们可以学习下。2019-01-01
最新评论