JQuery表格插件：鼠标移过变色，双击打开新页面，单选（支持多选）变色

17号那天，一直在长安街上堵着，正好有时间来写一点文章。现在在做一个工程项目管理平台，里面的列表项使用Repeater来生成表格。查到网上的日志的方法，使用直接改变背景色，我修改了一下，直接调用class，来看代码：

/*
2009-7-3修改
作者：Allen
版权没有，随便使用
参考自tablegrid和tableresizer
功能
1，奇偶行不同色，鼠标滑过颜色效果，点击高亮
2，列宽可拖动
3，双击事件，在每行第一列取a的href值
修改者：Ranran QQ:30152716 2010-9-19
1，增加可以多选、单选选项
2，引入CSS样式
3，兼容jquery1.4.1
不足：调整列宽不太好请大家指教（本打算改成在每一行都可以调整的，类似flexigrid）
*/

(function ($) {
    $.fn.rTable = function (options) {
        $.fn.rTable.defaults = {
            MutiSelect: false,
            useDblClick: false,
            col_border : ""
        };
        var opts = $.extend({}, $.fn.rTable.defaults, options);

        //拖动列宽
        var resize_columns = function (root) {
            var tbl = root.children("table");    //找到table
            var tr = tbl.find("tr:first");   //找到第一行
            var header, newwidth;
            var resize = false;

            root.width(tbl.width()); //table的宽度
            tr.children("th").css("border-right", opts.col_border);  //给第一行的th加上一个css
            var left_pos = root.offset().left;

            endresize = function () {
                if (resize == true && header != null) {
                    document.onselectstart = new Function("return true");
                    resize = false;
                    root.children("table").css("cursor", "");
                }
            };

            tbl.mousemove(function (e) {
                var left = (e.clientX - left_pos) + document.body.scrollLeft;

                if (resize) {
                    var width = left - (header.offset().left - left_pos)
                    - parseInt(header.css("padding-left"))
                    - parseInt(header.css("padding-right"));

                    if (width > 1) {
                        var current_width = header.width();
                        if (width > current_width) {
                            var total = root.width() + ((width - header.width()));
                            root.width(total);
                            header.width(width);
                        }
                        else {
                            header.width(width);
                            if (header.width() == width) {
                                var total = root.width() + ((width - current_width));
                                root.width(total);
                            }
                        }
                        newwidth = width;
                    }
                }
                else {
                    if (e.target.nodeName == "TH") {
                        var tgt = $(e.target);
                        var dosize = (left - (tgt.offset().left - left_pos)
                        > tgt.width() - 4);
                        $(this).css("cursor", dosize ? "col-resize" : "");
                    }
                }
            });

            tbl.mouseup(function (e) {
                endresize();
            });

            tbl.bind("mouseleave", function (e) {
                endresize();
                return false;
            });

            tr.mousedown(function (e) {
                if (e.target.nodeName == "TH"
                && $(this).css("cursor") == "col-resize") {
                    header = $(e.target);
                    resize = true;
                    document.onselectstart = new Function("return false");
                }
                return false;
            });

            tr.bind('mouseleave', function (e) {
                if (!resize)
                    root.children("table").css("cursor", "");
            });
        };

        return this.each(function () {
            var root = $(this).wrap("<div class='gvHeader' />").parent();
            resize_columns(root);

            //奇偶行上色
            $(this).find('tr:odd').toggleClass('alt-data-row');
            $(this).find('tr:even').toggleClass('data-row');

            $(this).find('tr').each(function () {
                //--------------------------------------this为tr------------------------------------------
                //  this.origColor = $(this).find('td').css('backgroundColor');    //未点击时的颜色
                // this.clicked = false;   //初始状态,设置bool变量clicked,以click事件触发此变量的true or false

                $(this).click(function (e) {  //此处的this是tr
                    var obj = (e.target || e.srcElement);
                    if (obj.href || obj.type) return true;
                    if ($(this).hasClass('row-select')) {
                        //如果已经选择的，就移除选择（好像不如不移除好看）
                        $(this).removeClass('row-select');
                        
                    }
                    else {

                        $(this).removeClass('row-over');
                        $(this).toggleClass('row-select');
                        if (!opts.MutiSelect) {
                            $(this).siblings().removeClass('row-select');
                        }
                      
                    }                    

                });

                //鼠标滑过及滑出事件
                $(this).mouseover(function () {
                    if (!$(this).hasClass('row-select')) {
                        $(this).toggleClass('row-over');
                    }
                   

                });
                $(this).mouseout(function () {
                    $(this).removeClass('row-over');

                });

                //双击事件
                if (opts.useDblClick) {
                    var urls = $(this).children("td:first-child").find("a").attr("href");
                    $(this).dblclick(function () {
                        window.open(urls, '详细情况', 'height=540,width=1020,top=10,left=10,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no')
             

 　　　　　　　　　　});
                }
               
            });
        });
    };
})(jQuery);

调用方法（注意，使用时要加上自定义的CSS文件，我用的是我自己的http://www.vfish.info/二次开发时用的CSS样式）：

<script type="text/javascript">
    $(document).ready(function () {
        $("#data").rTable();
    })
</script>

在下一篇我将以这个站http://www.vfish.info/为例，讲一讲，有限的已知数据的多样性表现（不知道我表达清楚没有）

完整例子可向我要。

 

请大家支持我一下，谢谢！

不明白为什么有人反对 。。。。