鼠标滑过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 ...
随机推荐
- C# 串口导致电脑蓝屏一个可能的原因
在某些win7电脑上, 如果使用SerialPort对象的Read(byte[] buffer, int offset, int count)方法读取端口数据时, 若端口接受缓存区的数据少于count ...
- SpringMVC的初始
1:其实一开始对SSH和SSM并不是很熟悉的,对SSH可能熟悉些(Struts,Spring,Hibernate)这三个框架.但是由于框架的更新,和出现了更好的框架,一些老框架就被淘汰了,但是呢,一些 ...
- mySQL 增量备份方案
1.在 /etc/my.cnf 下面设置开启bin-log 编辑 vim /etc/my.cnf [mysqld] binlog_format = MIXED ...
- （第7篇）灵活易用易维护的hadoop数据仓库工具——Hive
摘要: Hive灵活易用且易于维护,十分适合数据仓库的统计分析,什么样的结构让它具备这些特性?我们如何才能灵活操作hive呢? 博主福利 给大家推荐一套hadoop视频课程 [百度hadoop核心架构 ...
- asp.net core 微信获取用户openid
获取openid流程为首先根据微信开发参数构造AuthorizeUrl认证链接,用户跳转到该链接进行授权,授权完成将跳转到回调页(首次认证需要授权,后面将直接再跳转至回调页),此时回调页中带上一个GE ...
- Sea Battle CodeForces - 729D
题意: 有n个格子,a条船,每条船占b个格子.事先已经射击了k个格子,且这k次射击不会射到船上,求再射击几次可以射到某一条船的某一部分 思路: 观察样例可以发现,如果五个0,船的长度是3,那么这五个0 ...
- chrome浏览器调试工具你会使用吗？
浏览器调试工具使用总结 一. console使用 console.table(),可以把对象输出成表格的形式,直观的观察数据. console.dir(),可以直观观察dom元素的对象形式 二. $的 ...
- 网络爬虫之scrapy爬取某招聘网手机APP发布信息
1 引言 过段时间要开始找新工作了,爬取一些岗位信息来分析一下吧.目前主流的招聘网站包括前程无忧.智联.BOSS直聘.拉勾等等.有段时间时间没爬取手机APP了,这次写一个爬虫爬取前程无忧手机APP岗位 ...
- MongoDB——权限管理
MongoDB--权限管理 MongoDB默认是没有权限验证的,但生产环境中,没有权限控制是很不安全的. 我们先不详谈太多概念,直接动手创建两个典型的账号: 超级管理员,类似sql server的sa ...
- jquery.pagination.js添加跳转页
原作者github地址:https://github.com/gbirke/jquery_pagination 在这基础上加入了跳转到指定页. 修改后的jquery.pagination.js /** ...