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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
js+h5 canvas实现图片验证码
Oct 11 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php图像验证码生成代码
2017/06/08 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python代码xml转txt实例
2020/03/10 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python中Yield的基本用法
2020/10/18 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
公益活动策划方案
2014/01/09 职场文书
监察建议书范文
2014/03/12 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
医生个人年度总结
2015/02/28 职场文书
个人催款函范文
2015/06/24 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python