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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
js实现扫雷源代码
Nov 27 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
js实现简单的倒计时
Jan 28 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
层叠菜单的动态生成
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php实现每日签到功能
2018/11/29 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
js使用递归解析xml
2014/12/12 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python读取Kafka实例
2019/12/23 Python
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
七年级地理教学反思
2014/01/26 职场文书
担保书格式及范文
2014/04/01 职场文书
医药销售自荐书
2014/05/29 职场文书
材料物理专业求职信
2014/09/01 职场文书
法人授权委托书样本
2014/09/19 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
雷锋观后感
2015/06/10 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL