table行随鼠标变色
table行随鼠标变色
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)初始化
(2)单击奇数行
(3)单击偶数行
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>
table行随鼠标变色的更多相关文章
- GridView固定行宽,自动换行,鼠标放在Table的Tr上变色
//固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...
- 模拟在table中移动鼠标,高亮显示鼠标所在行
在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...
- asp.net实现动态添加table行
asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码: <%@ Page Language="C#" AutoEventWi ...
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- jquery 获得table 行数
1.获得Table总行数,分别使用了两种方法,结果不同:: 1).$("#table_Id").children("tr").length; 只能获得静态页面t ...
- table行转列
table行转列 摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来 ...
- jquery 删除table行,该如何解决
query 删除table行< table > < tbody > < tr > < td > 这行原来就有 </ td > < ...
- Js 合并 table 行 的实现方法
Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下, 经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...
- Table行合并操作
此方法不可取,但几天心血 保留,已有新想法,稍后会出一个完善的Table行列合并方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
随机推荐
- 一个 div 手写红绿灯- 分别用css3 和 js 实现
[要求] 一个div,配合 css3 或者 js 实现红绿灯切换的效果. [思路] 使用 css3,要实现红绿灯颜色的变换必然要用到 animation 动画,通过 keyframes 控制颜色的渐变 ...
- ABP官方文档翻译 2.6 定时
定时 介绍 时钟 客户端 时区 客户端 Binders和Converters 介绍 一些应用只针对一个时区,而其他的一些已用则有许多不同的时区.为了满足这样的需求和集中的时间操作,Abp提供了时间操作 ...
- POJ [P2631] Roads in the North
树的直径 树的直径求法: 任取一点u,找到树上距u最远的点s 找到树上距s点最远的点t,s->t的距离即为所求 #include <iostream> #include <cs ...
- BZOJ 1367: [Baltic2004]sequence [可并堆 中位数]
1367: [Baltic2004]sequence Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 1111 Solved: 439[Submit][ ...
- bind,apply,call区别总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- webstorm你不知道的秘密
相信你们用webstorm肯定都会用上下面介绍的Emmet插件这个可以自带的哦 Emmet语法 子代:> 兄弟:+ 父代:^ 重复:* 成组:() ID:# class:. 属性:[] 编号:$ ...
- 浅析Xilinx 三速以太网MAC IP核
之前在使用Altera的三速以太网MAC IP的基础上,完成了UDP协议数据传输.此次为了将设计移植到xilinx FPGA上,需要用到xilinx的三速以太网MAC IP核,当然也可以自己用HDL编 ...
- PYTHON3 RE正则表达:
The special characters are: "." Matches any character except a newline. "^" Matc ...
- 配置 github 上的程序
最近学习的node.vue的单页模式,看到github (地址:https://github.com/bailicangdu/node-elm)上面有大神做了一个几十页的系统,心想怎么弄到本地研究下 ...
- ★MySQL一些很重要的SQL语句
[mysqldumpslow] -s 排序选项:c 查询次数 r 返回记录行数 t 查询时间 -t 只显示top n条查询 mysqldumpslow -s r -t 10000 slow-que ...