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行随鼠标变色的更多相关文章

  1. GridView固定行宽,自动换行,鼠标放在Table的Tr上变色

    //固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...

  2. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  3. asp.net实现动态添加table行

    asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码: <%@ Page Language="C#" AutoEventWi ...

  4. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  5. jquery 获得table 行数

    1.获得Table总行数,分别使用了两种方法,结果不同:: 1).$("#table_Id").children("tr").length; 只能获得静态页面t ...

  6. table行转列

    table行转列 摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来 ...

  7. jquery 删除table行,该如何解决

    query 删除table行< table >  < tbody >  < tr >  < td > 这行原来就有 </ td >  < ...

  8. Js 合并 table 行 的实现方法

    Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下,  经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...

  9. Table行合并操作

    此方法不可取,但几天心血 保留,已有新想法,稍后会出一个完善的Table行列合并方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

随机推荐

  1. C#之DataTable转List与List转Datatable

    闲来无事,只有写代码啦,以下为DataTable转List与List转DataTable的两个方法,主要技术点用到了反射原理: /// <summary> /// 模型转换类 /// &l ...

  2. 使用Django实现分页器功能

    要使用Django实现分页器,必须从Django中导入Paginator模块 from django.core.paginator import Paginator 假如现在有150条记录要显示,每页 ...

  3. vsftp实现只能上传不能下载、删除权限配置

    vsftpd可以对每个用户特别限制.只要给那个用户建立一个设置文件,然后在文件里设置 在vsftpd.conf里加user_config_dir=/etc/vsftpd/vsftpd_user_con ...

  4. BZOJ 3239: Discrete Logging [BGSG]

    裸题 求\(ind_{n,a}b\),也就是\(a^x \equiv b \pmod n\) 注意这里开根不能直接下取整 这个题少了一些特判也可以过... #include <iostream& ...

  5. CF 716E. Digit Tree [点分治]

    题意:一棵树,边上有一个个位数字,走一条路径会得到一个数字,求有多少路径得到的数字可以整除\(P\) 路径统计一般就是点分治了 \[ a*10^{deep} + b \ \equiv \pmod P\ ...

  6. 2018/1/8 学习汇总,kettle简单介绍,集合遍历方式的选择及原理,防止表单重复提交的后台解决方案

    昨天因为当前这个二次开发项目的接近尾声,要求我们将生产环境数据库里的数据迁移到现在新的数据库来,但老数据库里是sqlserver而新数据库则是ORACLE,不仅仅面对着数据库数据类型结构不一致的问题, ...

  7. 前端系列之CSS基础知识概述

    1.什么是DIV (1).div就是html一个普通标签,进行区域划分.特性:独自占一行.独自不能实现复杂效果.必须结合css样式进行渲染. (2).div通常其是块级元素 (3).div是定义文档中 ...

  8. PHP码农在Golang压力下的生存之道－PHP性能优化实践

    随着国内Golang的火爆,phper的生存压力越来越大,在一次内部技术讨论中,gopher甚至提出,要什么php,写php的全部开掉,唉,码农何苦为难码农. 本文试图寻找一种有效实践,减少php w ...

  9. 关于 IO的同步异步间要描述

    IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接口. 比如你打开 ...

  10. shell 脚本中执行SQL语句 -e "..."

    /usr/local/mysql/bin/mysql -uroot -p123456 -e " use faygo source faygo.sql select * from devqui ...