JS+CSS实现表格高亮的方法
更新时间：2015年08月05日 11:21:20 作者：皮蛋
这篇文章主要介绍了JS+CSS实现表格高亮的方法,可实现鼠标滑过表格高亮效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下：
这里使用JavaScript+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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了JS如何生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
javascript HTML5 canvas实现打砖块游戏
这篇文章主要介绍了基于javascript HTML5 canvas实现打砖块游戏的具体实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
扩展String功能方法...2006-09-09
JavaScript中的splice主要用来对js中的数组进行操作，包括删除，添加，替换等。这篇文章主要介绍了JavaScript中的splice方法用法详解的相关资料,需要的朋友可以参考下2016-07-07
在页面数据处理的过程中都会不可避免的使用字符串的截取操作,下面这篇文章主要给大家介绍了关于js字符串截取指定字符前面/后面的字符串,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了javascript刷新父页面方法汇总详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
今天闲来无事用js写了个数学绘图包，还不算完整，不过总出现了雏形。2009-04-04
这篇文章主要介绍了十个免费的web前端开发工具详细整理的相关资料,希望通过本文大家能够理解使用免费web开发工具，需要的朋友可以参考下2017-09-09
本篇文章主要解释了使用SWFUpload进行多文件上传，这里整理了详细的代码，有需要的可以了解一下。2016-11-11
javascript xml读取,写入xml 实现代码2009-07-07
最新评论