jquery table的隔行变色 鼠标事件
一、鼠标事件
mouseover(function(){}); 鼠标移动到目标事件
mouseout(function(){}); 鼠标离开目标的事件
二、具体应用代码
<body>
<h3>Books Info:</h3>
<table id="table">
<tr>
<td>书名</td>
<td>价格</td>
<td>描述</td>
</tr>
<tr>
<td>《海的女儿》</td>
<td>11.00</td>
<td>悬崖上的金鱼姬,海里的女儿</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function(){
$("#table").find("tbody>tr:even") //偶数行的操作
.mouseover(function(){
$(this).css("background-color","#9AAAC7");
}).mouseout(function(){
$(this).css("background-color","#f9f9f9");
}).end()
.find("tbody>tr:odd") //奇数行的操作
.mouseover(function(){
$(this).css("background-color","#9AAAC7");
}).mouseout(function(){
$(this).css("background-color","#e5e9f0");
});
});
//注:在jQuery中,执行完mouseover或者mouseout等方法之后,都会返回当前的对象,所以可以进行链式操作
</script>
jquery table的隔行变色 鼠标事件的更多相关文章
- jQuery table tr隔行变色,鼠标移入移出变色,鼠标点击变色
.trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .t ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- JS---案例:表格隔行变色(鼠标划过背景色恢复)
案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...
- 我的第一个jQuery插件--表格隔行变色
虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...
- table表格隔行变色
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery选择器实现隔行变色
<script type="text/javascript"> $(function(){ $("#tableName tr:nth-child(even)& ...
- 隔行变色&&鼠标移入变色
<html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
随机推荐
- 【转】BCSphere入门教程01:Immediate Alert--不错
原文网址:http://www.ituring.com.cn/article/117570 写在前面 智能硬件开发的起点是智能硬件,在本教程中的每一章节,首先会列出您的蓝牙智能硬件所需要支持的Serv ...
- 如何将数据库中已有表导入到powerDesigner生成pdm文件
1.create new PDM: 2.select database menu; 3.click Reverse Engineer database :4.then choose your scr ...
- ARM学习笔记6——程序状态寄存器访问指令
这两条指令结合,可用于对CPSR或SPSR进行读/写操作. 当需要保存或修改当前模式下CPSR或SPSR的内容时,首先必须将这些内容传递到通用寄存器中 1.MRS指令(Move to Register ...
- 根据地址查询经纬度.html
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>根据地址查询经纬度</t ...
- linux 双网关双IP设置
server:CentOS5.8 ip:172.16.8.11 Gateway:172.16.8.1 ip:10.120.6.78 Gateway:10.120.6.1 网卡配置: eth0 poin ...
- Twitter 工程师谈 JVM 调优
一. 调优需要关注的几个方面 内存调优 CPU 使用调优 锁竞争调优 I/O 调优 二. Twitter 最大的敌人:延迟 导致延迟的几个原因? 最大影响因素是 GC 其他的有:锁和线程调度.I/O. ...
- mahout算法源码分析之Collaborative Filtering with ALS-WR (四)评价和推荐
Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 首先来总结一下 mahout算法源码分析之Collaborative Filtering with AL ...
- 【Struts2+Spring3+Hibernate3】SSH框架整合实现CRUD_1.2
作者: hzboy192@192.com Blog: http://my.csdn.net/peng_hao1988 版本总览:http://blog.csdn.net/peng_hao1988/ar ...
- ant+svn+tomcat实现项目自动部署
因工作需要,研究并实现了 ant+svn+tomcat实现项目自动部署,其中参考了下面文章:http://www.cnblogs.com/taoweiji/p/3700915.html jar包需要e ...
- Js- 菜单
很简单的JS二级菜单显示,收藏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...