鼠标滑过table时修改表格行的背景颜色

方法一：

#customers tr:hover

{

    background-color: #f00;

}

方法二：

<tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">

    <td>Apple</td>

    <td>Steven Jobs</td>

    <td>USA</td>

</tr>

完整样例：

 <html>

 <head>

 <style type="text/css">

     #customers

       {

           font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

           width:100%;

           border-collapse:collapse;

       }  

     #customers td, #customers th

       {

           font-size:1em;

           border:1px solid #98bf21;

           padding:3px 7px 2px 7px;

       }  

     #customers th

       {

           font-size:1.1em;

           text-align:left;

           padding-top:5px;

           padding-bottom:4px;

           background-color:#A7C942;

           color:#ffffff;

       }

         #customers tr:hover

         { /*方法一*/

             background-color: #f00;

         }

 </style>

 </head>  

 <body>

     <table id="customers">

         <tr>

             <th>Company</th>

             <th>Contact</th>

             <th>Country</th>

         </tr>  

           <!-- 方法二的使用 -->

         <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">

             <td>Apple</td>

             <td>Steven Jobs</td>

             <td>USA</td>

         </tr>  

         <tr class="alt">  <!-- 方法一的使用 -->

             <td>Baidu</td>

             <td>Li YanHong</td>

             <td>China</td>

         </tr>  

         <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">

             <td>Google</td>

             <td>Larry Page</td>

             <td>USA</td>

         </tr>  

         <tr class="alt" onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">

             <td>Lenovo</td>

             <td>Liu Chuanzhi</td>

             <td>China</td>

         </tr>  

         <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">

             <td>Microsoft</td>

             <td>Bill Gates</td>

             <td>USA</td>

         </tr>  

         <tr class="alt" onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">

             <td>Nokia</td>

             <td>Stephen Elop</td>

             <td>Finland</td>

         </tr>

     </table>

 </body>

 </html>

参考：https://blog.csdn.net/jxq0816/article/details/49885095

https://blog.csdn.net/SJF0115/article/details/7594912

方法三：

通过css和js代码如下

 <style type="text/css">

     .datatable tr:hover,.datatable tr.hilite

     {

     background-color:#99FF66;

     color:#0000CC;

     }

 </style>

 <script type="text/javascript">

     var rows = document.getElementsByTagName('tr');//取得行

     for(var i=0 ;i<rows.length; i++)

     {

         rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'

             this.className += 'hilite';

         }

         rows[i].onmouseout = function(){//鼠标移开,改变该类的名称

             this.className = this.className.replace('hilite','');

         }

     }

 </script>

完整参考代码

HTML：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>突出表格中鼠标指定的行</title>

 <link rel="stylesheet" type="text/css" href="突出表格中鼠标指定的行.css" />

 <style type="text/css">

     .datatable tr:hover,.datatable tr.hilite

     {

     background-color:#99FF66;

     color:#0000CC;

     }

 </style>

 <script type="text/javascript">

     var rows = document.getElementsByTagName('tr');//取得行

     for(var i=0 ;i<rows.length; i++)

     {

         rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'

             this.className += 'hilite';

         }

         rows[i].onmouseout = function(){//鼠标移开,改变该类的名称

             this.className = this.className.replace('hilite','');

         }

     }

 </script>

 </head>

 <body>

     <table class="datatable" summary="test">

         <caption>Student List</caption>

         <tr>

             <th>Student Name</th>

             <th>Date of Birth</th>

             <th>Class</th>

             <th>ID</th>

         </tr>

         <tr>

             <td>Joe Bloggs</td>

             <td>27/02/1993</td>

             <td>Mrs Jones</td>

             <td>12009</td>

         </tr>

         <tr>

             <td>William Smith</td>

             <td>04/03/1992</td>

             <td>Mrs Jones</td>

             <td>12010</td>

         </tr>

         <tr>

             <td>William Smith</td>

             <td>04/03/1992</td>

             <td>Mrs Jones</td>

             <td>12010</td>

         </tr>

         <tr>

             <td>William Smith</td>

             <td>04/03/1992</td>

             <td>Mrs Jones</td>

             <td>12010</td>

         </tr>

     </table>

 </body>

 </html>

css：

 @charset "utf-8";

 /* CSS Document */

 .datatable

 {

     border-collapse:collapse;

     color:#000000;

     font-family:Arial, Helvetica, sans-serif;

     border:1px solid #000099;

     font-size:14px;

 }

 .datatable th,.datatable td

 {

     text-align:left;

     border:1px solid #000000;

     padding-left:4px;

     padding-top:5px;

     padding-bottom:5px;

     padding-left:4px;

     padding-right:4px;

 }

 .datatable th

 {

     color:#000066;

     font-family:宋体,Arial, Helvetica, sans-serif;

     background-color:#CCCCCC;

 }

 .datatable caption

 {

     border:solid #000000 1px;

     background-color:#CCFF66;

     padding:5px 0 5px 0;

 }

参考来源：https://www.cnblogs.com/KeenLeung/archive/2013/03/10/2952752.html

鼠标滑过table时修改表格行的背景颜色的更多相关文章

鼠标滑过GridView的数据行时修改行的背景颜色
基本原理可以参考另一篇文章:鼠标滑过table时修改表格行的背景颜色下面是针对GridView实现该效果的代码:就是编写GridView控件的RowDataBound事件的代码. protected ...
修改MyEclipse行数的颜色
修改MyEclipse行数的颜色 1.未修改前,行数的颜色 2.依次选择"Window--->Preferences" 3.选择"General--->Edi ...
JQuery JTable根据某行的某个值来设置行的背景颜色
目录描述处理方法参考描述某个表的数据是用JQuery的JTable插件进行展示的.现在需求是:当表中的master字段为true时,就将对应的整行的背景颜色设置为浅蓝色. 处理方法在fie ...
在wpf datagrid中，想要根据一个条件来改变datagrid行的背景颜色
原文:在wpf datagrid中,想要根据一个条件来改变datagrid行的背景颜色在wpf datagrid中,想要根据一个条件来改变datagrid行的背景颜色例如根据学生的年龄来修改,年龄 ...
android:修改PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色
1.修改PagerTabStrip中的背景颜色我们在布局中直接设置background属性即可: <android.support.v4.view.ViewPager android:id=& ...
jquery 在 table 中修改某行值
修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...
[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例
转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮 ...
修改form 的字段背景颜色及字体颜色
1.通过个性化实现 2. 修改form 代码有一张工资单,当某个员工的工资超过5000时,用户需要系统能用红色来指示员工的姓名和工资. 实现方法: 我们新做一张form,按常规建好block和ite ...
MFC修改视图CView的背景颜色
(1) 在CYournameView(就是你的视图类,以下以CDrawLineView为例)添加了一个背景颜色变量 COLORREF m_bgcolor; (2)修改这个函数: BOOL CDrawL ...

随机推荐

创建表空间tablespace，删除
在plsql工具中执行以下语句,可建立Oracle表空间. /*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace yuhang_temp temp ...
LINQ学习之旅（二）
一:查询表达式(LINQ)简介 LINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.已成为编程语言的一个组成部分,在编写程序时可以得到很好的编译 ...
k短路（[SDOI2010]魔法猪学院）
题解: A*来做首先对终点向外面跑一遍最短路然后从起点开始dfs 按照估价函数建立小根堆每次取出最小的那个继续更新每次更新到终点cnt++直道cft=k为止那估价函数怎么弄呢? 其实就是终点 ...
mac和Linux的环境变量设置
摘抄自:http://hi.baidu.com/machao_pe/item/763d0ef12d32cd35fe3582db redhat和ubuntu中修改环境变量 2010-03-06 23:4 ...
BZOJ1195 [HNOI2006]最短母串 AC自动机 bfs
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解传送门 - BZOJ1195 题意概括给出一堆串,然后求一个包含这些串的所有串的最短的中的字典序最小的. 题解先造一个AC ...
P1141 01迷宫 DFS （用并查集优化）
题目描述有一个仅由数字00与11组成的n \times nn×n格迷宫.若你位于一格0上,那么你可以移动到相邻44格中的某一格11上,同样若你位于一格1上,那么你可以移动到相邻44格中的某一格00上 ...
Linux —— 文件处理指令
Python常用模块--datetime
datetime是Python专门用于处理日期和时间的标准模块. 1.获取当前的本地时间 #!/usr/bin/env python# -*- coding:utf-8 -*-__author__ = ...
为什么要使用getter/setter
变量私有化的好处 1. 在setter中可以加入合法性检查,比如设置颜色的函数中,对于RGB颜色要判断其值在0~255之间. 2. 更新与被设置变量相关的其它变量的值,比如在一个潜水艇模拟系统中,改变 ...
Ubuntu crontab 定时 python 详细
Ubuntu系统,定时执行python脚本. 目的:每分钟执行一次timer_test.py timer_test.py 路径 /home/li/d/pythonwork/test/timer_ ...

鼠标滑过table时修改表格行的背景颜色

鼠标滑过table时修改表格行的背景颜色的更多相关文章

随机推荐

热门专题