JS+CSS实现表格高亮的方法


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束。

运行效果如下图所示:

JS+CSS实现表格高亮的方法

具体代码如下:

<!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>
<title>高亮的表格</title>
<meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1" />
<style>
p, td, th {
  font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
  border: 1px solid #D6DDE6;
  border-collapse: collapse;
  width: 80%;
}
.datatable td {
  border: 1px solid #D6DDE6;  
  padding: 4px;
}
.datatable th {
  border: 1px solid #828282;
  background-color: #BCBCBC;
  font-weight: bold;
  text-align: left;
  padding-left: 4px;
}
.datatable caption {
  font: bold 0.9em Arial, Helvetica, sans-serif;
  color: #33517A;
  text-align: left;
  padding-top: 3px;
  padding-bottom: 8px;
}
.datatable tr:hover, .datatable tr.hilite {
  background-color: #DFE7F2;
  color: #000000;
}
</style>
</head>
<body>
<table summary="List of new students 2003" class="datatable">
 <caption>Student List</caption>
 <tr>
 <th scope="col">Student Name</th>
 <th scope="col">Date of Birth</th>
 <th scope="col">Class</th>
 <th scope="col">ID</th>
 </tr>
 <tr>
 <td>Joe Bloggs</td>
 <td>27/08/1997</td>
 <td>Mrs Jones</td>
 <td>12009</td>
 </tr>
 <tr>
 <td>William Smith</td>
 <td>20/07/1997</td>
 <td>Mrs Jones</td>
 <td>12010</td>
 </tr>
 <tr>
 <td>Jane Toad</td>
 <td>21/07/1997</td>
 <td>Mrs Jones </td>
 <td>12030</td>
 </tr>
 <tr>
 <td>Amanda Williams</td>
 <td>19/03/1997</td>
 <td>Mrs Edwards</td>
 <td>12021</td>
 </tr>
</table>
<script type="text/javascript">
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
  rows[i].onmouseover = function() {
    this.className += ' hilite';
  }
  rows[i].onmouseout = function() {
    this.className = this.className.replace('hilite', '');
  }
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 #Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 #Javascript
coffeescript使用的方式汇总
Aug 05 #Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 #Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 #Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 #Javascript
You might like
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
pymysql的简单封装代码实例
2020/01/08 Python
浅析Python 条件控制语句
2020/07/15 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
教学大赛获奖感言
2014/01/15 职场文书
初三学习计划书范文
2014/04/30 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
个人事迹材料范文
2014/12/29 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python