JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图:
jquery关键代码:
<script type="text/javascript"> //该文件为:js.js
// 当鼠标移到表格上是,当前一行背景变色
$(document).ready(function(){
var odd_color="#ddd";//奇数行 颜色
var even_color="#fff";//偶数行 颜色
var hover_color="#d5f4fe"; //鼠标悬浮所在行的颜色
$(".data_list tr:odd td").css("background-color",odd_color); //改变奇数行背景色
$(".data_list tr:odd").attr("bg",odd_color); // 把背景色保存到属性中
$(".data_list tr:even").attr("bg",even_color);
$(".data_list tr td").mouseover(function(){ // 当鼠标移到表格上,当前一行背景变色
$(this).parent().find("td").css("background-color",hover_color);
}).mouseout(function(){ // 离开的该行恢复该行原有背景颜色
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
});
</script>
html关键代码
<html>
<head>
<meta charset="UTF-8"/>
<title>JQuery实现隔行变色和突出显示当前行 效果</title>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='js.js'></script> <!--加载jq部分处理代码-->
</head>
<body>
<div>
<table border="1" cellspacing="0" cellpadding="0" class="data_list">
<tr><th>用户姓名</th><th>用户性别</th><th>用户电话</th><th>用户邮箱</th><th>预计购置时间</th></th></tr>
<tr><td>name1</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name2</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name3</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name6</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name4</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name5</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
</table>
</div>
</body>
</html>
转载请注明出处,谢谢!
JQuery实现隔行变色和突出显示当前行 效果的更多相关文章
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
- jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )
<title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...
- jQuery实现隔行变色
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery特效 隔行变色
1.通过使用onmouseover onmouseout方法 2.变色使用background-color(css)属性 3.变色的标签是td(tr仅仅能使用事件,颜色样式不起作用) 第一种方法 使用 ...
- jquery table 隔行变色+点谁谁变色
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
随机推荐
- c语言判断用户是否输入-非阻塞函数kbhit
一.基础研究 要从地址读取数据,肯定是要定义一个指针变量p,用它来实现变换地址和取值的功能.另外程序是当两个条件中的某一个出现时才停止,所以应该用while~do循环语句循环输出n和d,并用while ...
- Java: for(;;) vs. while(true)
What is the difference between a standard while(true) loop and for(;;)? Is there any, or will both b ...
- shell中使用sqlplus及调试相关
五.为了安全要求每次执行shell都手工输入密码$ vi test5.sh #!/bin/bashecho -n "Enter password for u_test:"read ...
- yiic模块module使用
模块是一个独立的软件单元,它包含 模型, 视图, 控制器 和其他支持的组件. 在许多方面上,模块看起来像一个 应用.主要的区别就是模块不能单独部署,它必须存在于一个应用里. 用户可以像他们访问普通应用 ...
- 【疑难杂症】xmind启动后,自动退出的问题
xmind安装一段时间后,就会出现一启动,就自动退出的情况.卸载重装也无法解决,在试过网上的各种方法后,发现这个方法最凑效. 打开xmind.ini(安装目录下),删除以下几行,保存配置文件,重启即可 ...
- zabbix linux被监控端部署
测试使用agentd监听获取数据. 服务端的安装可以查看http://blog.chinaunix.net/space.php?uid=25266990&do=blog&id=3380 ...
- 【KMP】Period
KMP算法 Next[]函数深入理解,Next[]当前字符前匹配字符数,串长n-Next[i]=串内循环子串的长度p. 本题求子循环串内循环节数. Problem Description For ea ...
- if(!!attr)是什么鬼???
看到很多代码if(!!attr),为什么不直接写if(attr):其实这是一种更严谨的写法:请测试 typeof 5和typeof !!5的区别.!!的作用是把一个其他类型的变量转成的bool类型.
- (转)利用ant在Mac 下自动化打包签名Android程序
1.创建一个android项目 参数说明:-k /--package 为命名空间(包名)-a /--name 工程名-p /--path 项目 -t 为目标平台的版本编号 命令:./android c ...
- servletContext百科
servletContext 编辑 servletContext接口是Servlet中最大的一个接口,呈现了web应用的Servlet视图.ServletContext实例是通过 getServl ...