自己写的,很简单,用起来也很方便.
- function hoverTagBgFromId(domId,hoverTag,color){
- /*
- 切换ID内的标签背景颜色,domId:ID,hoverTag:要切换的标签名称,color:切换的颜色[,arguments[3]:偶数行颜色]
- http://www.vgot.cn by Pader
- */
- var hoverElemt = document.getElementById(domId).getElementsByTagName(hoverTag);
- var formerlyColor = new Array();
- var len = hoverElemt.length;
- for(var i=0;i<len;i++){
- if(typeof(arguments[3]) != 'undefined' && i % 2 == 1) {
- hoverElemt[i].style.backgroundColor = arguments[3];
- }
- if(color != '') {
- hoverElemt[i].onmouseover = function(){
- formerlyColor[i] = this.style.backgroundColor;
- this.style.backgroundColor = color;
- }
- hoverElemt[i].onmouseout = function(){
- this.style.backgroundColor = formerlyColor[i];
- }
- }
- }
- }
使用方法也很简单
- <!-- 这是一个表格 -->
- <table>
- <tbody id="hoverbody">
- <tr><td>LINE</td><td>LINE</td></tr>
- <tr><td>LINE</td><td>LINE</td></tr>
- <tr><td>LINE</td><td>LINE</td></tr>
- <tr><td>LINE</td><td>LINE</td></tr>
- </tbody>
- </table>
把需要切换和更改颜色的行,也就是 TR 们,用一个 TBODY 包括起来,给它一个ID
然后在表格下面,或者 onload 函数里使用
hoverTagBgFromId("hoverbody","tr","#00FF00");
第一个参数就是 TBODY 的 ID,第二个是要切换颜色的TAG,TR就是表格行,第三个是鼠标经过时的颜色.如果想要偶数行的颜色不同,只需指定第四个参数即可
hoverTagBgFromId("hoverbody","tr","#00FF00","#AEC0F4");