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 对象的创建与使用
Mar 09 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
Javascript中的解构赋值语法详解
Apr 02 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几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
2015年食品安全宣传周活动总结
2015/07/09 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python