这篇文章主要介绍了 JS 实现的表格行鼠标点击高亮效果代码, 涉及 JavaScript 响应鼠标事件动态变换页面元素属性的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 实现的表格行鼠标点击高亮效果代码。分享给大家供大家参考,具体如下:
偶尔在看天天基金网净值公告时,从源代码里剥下的一段 js 代码,感觉比较实用,分享一下 (仅 IE 有效)
- <script type="text/javascript">
- var highlightcolor = '#E0F2FE';
- var clickcolor = '#ffedd2';
- function MouseOver() {
- var source = event.srcElement;
- if (source.tagName == "TD") {
- source = source.parentElement;
- var cells = source.children;
- if (cells[0].style.backgroundColor != highlightcolor && cells[0].style.backgroundColor != clickcolor) for (i = 0; i < cells.length; i++) {
- cells[i].style.backgroundColor = highlightcolor;
- }
- }
- }
- function MouseOut() {
- var source = event.srcElement;
- if (source.tagName == "TD") {
- source = source.parentElement;
- var cells = source.children;
- if (cells[0].style.backgroundColor != clickcolor) for (i = 0; i < cells.length; i++) {
- cells[i].style.backgroundColor = "";
- }
- }
- }
- function MouseClick() {
- var source = event.srcElement;
- if (source.tagName == "TD") {
- source = source.parentElement;
- var cells = source.children;
- if (cells[0].style.backgroundColor != clickcolor) for (i = 0; i < cells.length; i++) cells[i].style.backgroundColor = clickcolor;
- else for (i = 0; i < cells.length; i++) cells[i].style.backgroundColor = "";
- }
- }
- </script>
- <table onmouseover="MouseOver()" onclick="MouseClick()" onmouseout="MouseOut()"
- cellspacing="0" bordercolordark="#ffffff" bordercolorlight="#cccccc" border="1"
- width="80%" align="center" style="cursor:pointer">
- <tr>
- <td>
- 1
- </td>
- <td>
- a
- </td>
- <td>
- b
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- c
- </td>
- <td>
- d
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- e
- </td>
- <td>
- f
- </td>
- </tr>
- <tr>
- <td>
- 4
- </td>
- <td>
- g
- </td>
- <td>
- h
- </td>
- </tr>
- </table>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0224/268456.html