这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了纯 JS 代码实现隔行变色鼠标移入高亮的相关资料, 非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于 js 代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/CSS">
- #table { width: 400px; border-collapse: collapse; }
- </style>
- </head>
- <body>
- <table id="table" border="1">
- <thead>
- <td>
- ID
- </td>
- <td>
- 姓名
- </td>
- <td>
- 年龄
- </td>
- </thead>
- <tbody>
- <tr>
- <td>
- 1
- </td>
- <td>
- 黄艺
- </td>
- <td>
- 20
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- 张三
- </td>
- <td>
- 21
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- 李四
- </td>
- <td>
- 22
- </td>
- </tr>
- <tr>
- <td>
- 4
- </td>
- <td>
- 网无
- </td>
- <td>
- 23
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- <script type="text/javascript">
- // 实现隔行变色,鼠标移入高亮
- var table = document.getElementById("table");
- var oldColor = ""; //声明一个变量,保存表格原来的颜色
- for (var i = 0; i < table.tBodies[0].rows.length; i++) {
- //使用判断实现隔行变色
- if (i % 2 == 0) {
- table.tBodies[0].rows[i].style.backgroundColor = "gray";
- } else {
- table.tBodies[0].rows[i].style.backgroundColor = "#ccc";
- }
- //实现鼠标移入高亮
- table.tBodies[0].rows[i].onmouseover = function() {
- oldColor = this.style.backgroundColor;
- this.style.backgroundColor = "red";
- }
- //实现鼠标移出变回原来的颜色
- table.tBodies[0].rows[i].onmouseout = function() {
- this.style.backgroundColor = oldColor;
- }
- }
- </script>
- </html>
以上所述是小编给大家介绍的纯 JS 代码实现隔行变色鼠标移入高亮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0605/330275.html