用JQuery实现表格隔行变色和突出显示当前行的代码


Posted in Javascript onFebruary 10, 2012

用JQuery实现表格隔行变色和突出显示当前行的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>表格隔行背景和突出显示当前行</title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
body{ margin:0 auto; font-size:12px;} 
.data_list td{ width:100px;} 
</style> 
<script type="text/javascript"> 
/* 当鼠标移到表格上是,当前一行背景变色 */ 
$(document).ready(function(){ 
$(".data_list tr td").mouseover(function(){ 
$(this).parent().find("td").css("background-color","#d5f4fe"); 
}); 
}) 
/* 当鼠标在表格上移动时,离开的那一行背景恢复 */ 
$(document).ready(function(){ 
$(".data_list tr td").mouseout(function(){ 
var bgc = $(this).parent().attr("bg"); 
$(this).parent().find("td").css("background-color",bgc); 
}); 
}) 
$(document).ready(function(){ 
var color="#ffeab3" 
$(".data_list tr:odd td").css("background-color",color); //改变偶数行背景色 
/* 把背景色保存到属性中 */ 
$(".data_list tr:odd").attr("bg",color); 
$(".data_list tr:even").attr("bg","#fff"); 
}) 
</script> 
</head> 
<body> 
<table class="data_list"> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript小技巧 2.5 则
Sep 12 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
js中跨域方法原理详解
Jul 19 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 #Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 #Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 #Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 #Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 #Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 #Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP的中问验证码
2006/11/25 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
初识Node.js
2014/09/03 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python threading的使用方法解析
2019/08/28 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python 使用type来定义类的实现
2019/11/19 Python
python实现用户名密码校验
2020/03/18 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
就业推荐表自我鉴定
2013/10/29 职场文书
个人作风剖析材料
2014/02/02 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
利用python调用摄像头的实例分析
2021/06/07 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python