奇偶行高亮显示及鼠标划过高亮显示类

所属分类：网络编程 / JavaScript 阅读数： 1271

收藏 0赞 0分享

花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>奇或偶数行高亮显示及鼠标划过高亮显示类~@Mr.Think</title>  </head> <body>  <h1><a href="http://mrthink.net/">Mr.Think的个人博客</a>@专注前端技术,热爱PHP,崇尚简单生活.</h1> <table id="itab"> <caption>我是高亮奇数行及鼠标划过高亮显示效果,Uh Oh!</caption> <tr><td>1</td><td>A</td><td>C</td><td>D</td><td>Y</td></tr> <tr><td>2</td><td>B</td><td>S</td><td>A</td><td>E</td></tr> <tr><td>3</td><td>H</td><td>I</td><td>F</td><td>J</td></tr> <tr><td>4</td><td>A</td><td>G</td><td>A</td><td>N</td></tr> <tr><td>5</td><td>Z</td><td>A</td><td>G</td><td>M</td></tr> <tr><td>6</td><td>C</td><td>D</td><td>L</td><td>H</td></tr> <tr><td>7</td><td>D</td><td>W</td><td>G</td><td>S</td></tr> <tr><td>8</td><td>T</td><td>Q</td><td>O</td><td>M</td></tr> </table> <ol id="olid"> <li>可以通过改变<em>var odd=true;</em>的值来确定是高亮显示奇数行还是偶数行;</li> <li>DOM编程,兼容主流浏览器,可扩展性强;</li> <li>适应于表格,列表,div等;</li> <li><em>elemid</em>:事件ID,就是你想实现这种效果所在ID;</li> <li><em>tagName</em>:事件tagName值,比如li,tr,p等等;</li> <li><em>tagNameHighClass</em>:奇或偶数行高亮显示的样式;</li> <li><em>crossTagNameClass<em>:鼠标划过时高亮显示的样式.</li> </ol> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

参数说明:

1.elemid:事件ID,就是你想实现这种效果所在ID;
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶数行高亮显示的样式;
4.crossTagNameClass:鼠标划过时高亮显示的样式.

使用说明:

1.如果你只想要其中一个效果,在类中,删除对应的不需要的代码,有注释;
2.调用(加载函数建议用本文中的加载函数,用window.onload非明智之举):

复制代码代码如下:

 
window.onload=function highYourElem(){ 
highLight("yourId","yourTagName","yourHighClass","yourCrossClass"); 
} 

更多精彩内容其他人还在看

奇偶行高亮显示及鼠标划过高亮显示类

js实现图片上传预览原理分析

Angular限制input框输入金额（是小数的话只保留两位小数点）

详解vue-cli + webpack 多页面实例配置优化方法

详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

JavaScript反弹动画效果的实现代码

解决vue2.x中数据渲染以及vuex缓存的问题

jsonp跨域请求详解

解决vue里碰到 $refs 的问题的方法

js自定义弹框插件的封装

深入理解vue $refs的基本用法

网络赚钱

站长故事