JavaScript表格隔行换色悬停高亮
表格隔行换色悬停高亮，网上也有很多方法。但找来找去用着不顺手，自己重新写一个。现在把代码贴出来：一、希望各位高手提提建议。如果能帮我重构下则更好。我总感觉写的不伦不类的！二、希望能帮助到一些朋友。
全部代码如下：
<html> <head> <title>隔行换色——悬停高亮——单击选中</title> </head> <script type="text/javascript"> (function () { /* *鼠标由表格划过更改表格行的颜色，单击选中并加颜色高亮 *参数说明: *id 必须 *option对象可选参数 option.mouseMoveOverColor鼠标划过时候的颜色 option.mouseOnClickColor鼠标单击后的颜色 option.oddtrColor 表格奇数行的颜色 option.eventrColor表格偶数行的颜色 mouseMoveOverColor和mouseOnClickColor可以任选其一 例如传参数：1、qhjswSetTableBgcolor("tableid",{mouseMoveOverColor:"#C8E6FF",mouseOnClickColor:"#0066FF"}).start(); var ts=new qhjswSetTableBgcolor("tableid",{mouseMoveOverColor:"#C8E6FF",mouseOnClickColor:"#0066FF"}); ts.oddevenOpen=true;//开启隔行换行 ts..start(); 如果要开启隔行换色把返回对象的oddevenOpen属性改为true *作者:bluescreen *日期:2012-10-11 14:00 */ var qhjswSetTableBgcolor = function (id, option) { //判断对象传入的参数是否符合要求 if (arguments.length < 1 || arguments.length > 2) { throw new Error("参数个数不正确"); } if (typeof (id) != "string") { throw new Error("ID必须为字符串类型"); } //判断是否使用new关键字进行实例化 if (this.constructor === window.constructor) { return new qhjswSetTableBgcolor(id, option); } if (typeof (option) != "undefined") { if (option.constructor != Object) { throw new Error(option + "不是对象"); } } option = option || {}; //如果不存在option对象就赋值一个空对象给option var tbobj = document.getElementById(id); var trclickindex = "undefined"; var trclickcolor = null; var clicktag = 0; this.obj = tbobj; this.author = "bluescreen"; this._len = tbobj.rows.length; this.mouseMoveOverColor = option.mouseMoveOverColor || "#C8E6FF"; this.mouseOnClickColor = option.mouseOnClickColor || "#1e90ff"; this.oddtrColor = option.oddtrColor || "#fff"; this.eventrColor = option.eventrColor || "#F5F5F5"; this.oddevenOpen = false; this._gettrclickindex = function () { return trclickindex; } this._settrclickindex = function (index) { trclickindex = index; } this._gettrclickcolor = function () { return trclickcolor; } this._settrclickcolor = function (colorName) { trclickcolor = colorName; } this._setclicktag = function (tag) { clicktag = tag } this._getclicktag = function () { return clicktag } } qhjswSetTableBgcolor.prototype = { bindMouse: function () { var curobj = this; for (var i = 0; i < this._len; i++) { this.obj.rows[i].onmouseover = (function (index, tr) { return function () { curobj.tempColor = tr.style.backgroundColor; if (0 != index && tr.clicktag != 1) { curobj.setBgColor(tr, curobj.mouseMoveOverColor); } } })(i, this.obj.rows[i]); this.obj.rows[i].onmouseout = (function (index, tr) { return function () { if (0 != index && tr.clicktag != 1) { curobj.setBgColor(tr, curobj.tempColor); } } })(i, this.obj.rows[i]); this.obj.rows[i].onclick = (function (index, tr) { return function () { if (0 != index && tr.clicktag != 1) { if (curobj._gettrclickindex() != "undefined") { curobj.setBgColor(curobj.obj.rows[curobj._gettrclickindex()], curobj._gettrclickcolor()); curobj.obj.rows[curobj._gettrclickindex()].clicktag = 0; } curobj._settrclickcolor(curobj.tempColor); curobj.setBgColor(tr, curobj.mouseOnClickColor); curobj._settrclickindex(index); tr.clicktag = 1; } } })(i, this.obj.rows[i]); if (this.oddevenOpen && i != 0) { this.setBgColor(this.obj.rows[i], ((this.obj.rows[i].sectionRowIndex % 2 == 0) ? this.eventrColor : this.oddtrColor)); } } }, start: function () { this.bindMouse(); }, getobj: function (id) { //获取指定ID的对象 return document.getElementById(id); }, setBgColor: function (tr, color) { //设置背景色 tr.style.backgroundColor = color; }, getBgColor: function (tr) { return tr.style.backgroundColor; } }; window.qhjswSetTableBgcolor = qhjswSetTableBgcolor; })(); window.onload = function () { var ts = qhjswSetTableBgcolor("tabid"); ts.oddevenOpen = true; ts.start(); }; </script> <body> <table id="tabid"> <thead> <tr style="background-color: Gray;"> <td> 姓名 </td> <td> 电话 </td> <td> 国籍 </td> </tr> </thead> <tbody> <tr> <td> 张三 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 李四 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 王二 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 麻子 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 欧阳夏天 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 司马懿 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 东邪 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 洪七公 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 杨过 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 小龙女 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 神经病 </td> <td> </td> <td> 中国 </td> </tr> <tr> <td> 王子 </td> <td> </td> <td> 中国 </td> </tr> </tbody> </table> </body> </html>
效果如下：
隔行换色——悬停高亮——单击选中
| 姓名 | 电话 | 国籍 |
| 张三 | 13096585211 | 中国 |
| 李四 | 13096585212 | 中国 |
| 王二 | 13096585213 | 中国 |
| 麻子 | 13096585214 | 中国 |
| 欧阳夏天 | 13096585214 | 中国 |
| 司马懿 | 13096585215 | 中国 |
| 东邪 | 13096585216 | 中国 |
| 洪七公 | 13096585217 | 中国 |
| 杨过 | 13096585219 | 中国 |
| 小龙女 | 13096585220 | 中国 |
| 神经病 | 13096585221 | 中国 |
| 王子 | 13096585222 | 中国 |
