用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生成随机颜色示例代码
May 05 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php封装的page分页类完整实例
2016/10/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
盛大笔试题
2016/11/05 面试题
2014年圣诞节促销方案
2014/03/14 职场文书
年终晚会活动方案
2014/08/21 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
六一亲子活动感想
2015/08/07 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js