JavaScript表格隔行换色悬停高亮

最新推荐文章于 2024-07-31 16:33:32 发布

weixin_30566111

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bluescreen/archive/2012/10/12/2721246.html

版权

表格隔行换色悬停高亮，网上也有很多方法。但找来找去用着不顺手，自己重新写一个。现在把代码贴出来：一、希望各位高手提提建议。如果能帮我重构下则更好。我总感觉写的不伦不类的！二、希望能帮助到一些朋友。

全部代码如下：

<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	中国

转载于:https://www.cnblogs.com/bluescreen/archive/2012/10/12/2721246.html

weixin_30566111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript表格隔行换色悬停高亮

表格隔行换色悬停高亮，网上也有很多方法。但找来找去用着不顺手，自己重新写一个。现在把代码贴出来：一、希望各位高手提提建议。如果能帮我重构下则更好。我总感觉写的不伦不类的！二、希望能帮助到一些朋友。全部代码如下：<html><head> <title>隔行换色——悬停高亮——单击选中</title></head&gt...
复制链接

扫一扫