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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
JS实现时间校验的代码
May 25 Javascript
JS实现小米轮播图
Sep 21 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
50个PHP程序性能优化的方法
2014/06/02 PHP
php通过session防url攻击方法
2014/12/10 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python绘制封闭多边形教程
2020/02/18 Python
Python如何对XML 解析
2020/06/28 Python
python3将变量输入的简单实例
2020/08/19 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
供应链金融服务方案
2014/05/25 职场文书
转让协议书范本
2014/09/13 职场文书
大学生实训报告总结
2014/11/05 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
企业战略合作意向书
2015/05/08 职场文书
2016大学军训通讯稿
2015/11/25 职场文书