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菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
随机推荐
- [PeterDLax著泛函分析习题参考解答]第4章 Hahn-Bananch 定理的应用
1. 证明: 若在 4.1 节中取 $S=\sed{\mbox{正整数}}$, $Y$ 是收敛数列构成的空间, $\ell$ 由 (14) 式定义, 则由 (4) 给出的 $p$ 和由 (11) 定义 ...
- Java for selenium(webdriver) 环境搭建
开发环境 1. jdk1.7 2. Eclipse 3. selenium(selenium-java-2.42.2.zip) 将下载下来的 selenium-java-2.42.2.zip 解压, ...
- opencv 中文文档地址
http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/tutorials.html
- pg_dump实例详解(备份postgresql和greenplum数据库)
一.pg_dump的用法:数据库的导入导出是最常用的功能之一,每种数据库都提供有这方面的工具,例如Oracle的exp/imp,Informix的dbexp/dbimp,MySQL的mysqldump ...
- Sublime Text 3 格式代码插件 codeFormatter
一款可以对html.JS.CSS.PHP.python代码格式化的sublime插件 默认快捷键ctrl+alt+F,默认可以对html.js.css格式代码, 如果想对PHP格式化,需要PHP5.6 ...
- javascript字符串基本方法
1)auchor anchor() 方法用于创建 HTML 锚. var txt="Hello world!" document.write(txt.anchor("my ...
- Jakarta-Commons- BeanUtils学习笔记:
http://www.cnblogs.com/zhangyi85/archive/2009/04/22/1441341.html 1.什么是BeanUtils: BeanUtils主要提供了对于Jav ...
- 如何屏蔽Button setClickable与setEnabled
今天想让按键暂时无效,满足一定条件下才可以被用户按到.最初以为是setClickable,谁知搞错了.请看手册: 复制代码代码如下: public void setClickable (boolean ...
- 恭贺自己itpub和csdn双双获得专家博客称号
这是对一个技术人员行业内很难得的认可,记录下来,加油...一切向钱看,明天会更好.
- C# DataTable怎么合计字段
DataTable dt = new DataTable(); var age=dt.Compute("avg(age)",""); var height =d ...