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 Eval 函数使用
Mar 23 Javascript
JS继承 笔记
Jul 13 Javascript
javascript的console.log()用法小结
May 31 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
关于ES6尾调用优化的使用
Sep 11 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
我的论坛源代码(二)
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php实用代码片段整理
2016/11/12 PHP
php格式文件打开的四种方法
2018/02/24 PHP
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python sys.path详细介绍
2013/10/17 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Numpy掩码式数组详解
2018/04/17 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python之array赋值技巧分享
2019/11/28 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
高中体育教学反思
2014/01/24 职场文书
应届大学生自荐书
2014/06/17 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
违纪检讨书范文
2015/01/27 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
nginx搭建NFS网络文件系统
2022/04/14 Servers