table行随鼠标移动变色示例


Posted in Javascript onMay 07, 2014

1、设计表格

<body class="html_body"> 
<div class="body_div"> 
<table id="tab"> 
<tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> 
<th>工号</th> 
<th>姓名</th> 
<th>年龄</th> 
<th>性别</th> 
</tr> 
<tr> 
<td>2014010101</td> 
<td>张峰</td> 
<td>56</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010102</td> 
<td>李玉</td> 
<td>42</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010103</td> 
<td>王珂</td> 
<td>36</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010104</td> 
<td>张钰</td> 
<td>31</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010105</td> 
<td>朱顾</td> 
<td>44</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010106</td> 
<td>胡雨</td> 
<td>35</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010107</td> 
<td>刘希</td> 
<td>30</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010108</td> 
<td>孙宇</td> 
<td>45</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010109</td> 
<td>谷雨</td> 
<td>33</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010110</td> 
<td>科宇</td> 
<td>45</td> 
<td>女</td> 
</tr> 
</table> 
</div> 
</body>

2、设计样式
.html_body .body_div{ 
width: 1340; 
height: 595; 
} 
.body_div{ 
font-size: 12px; 
background-color: #CCCCCC; 
} 
.tr_odd{ 
background-color: orange; 
} 
.tr_even{ 
background-color: aqua; 
} 
.mouse_color{ 
background-color: green; 
} 
#tab{ 
border: 1px #FF0000 solid; 
text-align: center; 
width: 100%; 
height: 100%; 
}

3、设计JS
//设置奇数行背景色 
$("#tab tr:odd").find("td").addClass("tr_odd"); 
//设置偶数行背景色 
$("#tab tr:even").find("td").addClass("tr_even"); /** 
* 鼠标移到的颜色 
*/ 
$("#tab tr").mouseover(function(){ 
$(this).find("td").addClass("mouse_color"); 
}); 
/** 
* 鼠标移出的颜色 
*/ 
$("#tab tr").mouseout(function(){ 
$(this).find("td").removeClass("mouse_color"); 
});

4、设计结果

(1)初始化
table行随鼠标移动变色示例 
(2)单击奇数行
table行随鼠标移动变色示例 
(3)单击偶数行
table行随鼠标移动变色示例 
5、附录

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>table随鼠标变色</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> 
<style type="text/css"> 
.html_body .body_div{ 
width: 1340; 
height: 595; 
} 
.body_div{ 
font-size: 12px; 
background-color: #CCCCCC; 
} 
.tr_odd{ 
background-color: orange; 
} 
.tr_even{ 
background-color: aqua; 
} 
.mouse_color{ 
background-color: green; 
} 
#tab{ 
border: 1px #FF0000 solid; 
text-align: center; 
width: 100%; 
height: 100%; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
//设置奇数行背景色 
$("#tab tr:odd").find("td").addClass("tr_odd"); 
//设置偶数行背景色 
$("#tab tr:even").find("td").addClass("tr_even"); 
/** 
* 鼠标移到的颜色 
*/ 
$("#tab tr").mouseover(function(){ 
$(this).find("td").addClass("mouse_color"); 
}); 
/** 
* 鼠标移出的颜色 
*/ 
$("#tab tr").mouseout(function(){ 
$(this).find("td").removeClass("mouse_color"); 
}); 
}); 
</script> 
</head> 
<body class="html_body"> 
<div class="body_div"> 
<table id="tab"> 
<tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> 
<th>工号</th> 
<th>姓名</th> 
<th>年龄</th> 
<th>性别</th> 
</tr> 
<tr> 
<td>2014010101</td> 
<td>张峰</td> 
<td>56</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010102</td> 
<td>李玉</td> 
<td>42</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010103</td> 
<td>王珂</td> 
<td>36</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010104</td> 
<td>张钰</td> 
<td>31</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010105</td> 
<td>朱顾</td> 
<td>44</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010106</td> 
<td>胡雨</td> 
<td>35</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010107</td> 
<td>刘希</td> 
<td>30</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010108</td> 
<td>孙宇</td> 
<td>45</td> 
<td>女</td> 
</tr> 
<tr> 
<td>2014010109</td> 
<td>谷雨</td> 
<td>33</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2014010110</td> 
<td>科宇</td> 
<td>45</td> 
<td>女</td> 
</tr> 
</table> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 #Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 #Javascript
js获取select默认选中的Option并不是当前选中值
May 07 #Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 #Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 #Javascript
jquery删除数据记录时的弹出提示效果
May 06 #Javascript
js单词形式的运算符
May 06 #Javascript
You might like
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
理解Python中的类与实例
2015/04/27 Python
python中的代码编码格式转换问题
2015/06/10 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
详解pandas赋值失败问题解决
2020/11/29 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
行政主管职责范本
2014/03/07 职场文书
项目经理岗位职责
2015/01/31 职场文书
工作收入证明模板
2015/06/12 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript