jquery 表格插件 (奇偶行不同色,鼠标滑过变色,点击变色,双击动作,改变列宽) 半原创

      参考tablegrid和resize两个插件,写到现在的插件,希望多多交流,直接上代码
      第一次写插件,大家多多拍砖,我家房子就有望了~~~
  1/*
  22009-7-3修改
  3作者:Allen
  4版权没有,随便使用
  5参考自tablegrid和tableresizer
  6功能
  7    1,奇偶行不同色,鼠标滑过颜色效果,点击高亮
  8    2,列宽可拖动
  9    3,双击事件,在每行第一列取a的href值
 10*/

 11(function($) {
 12
 13$.fn.tablegrid = function(options){
 14    $.fn.tablegrid.defaults = {
 15        oddColor   : '#C4E1FF',
 16        evenColor  : '#F2F9FD',
 17        overColor  : '#C7C7E2',
 18        selColor   : '#336666',
 19        useClick   : true,
 20        useDblClick:false,
 21        col_border : "solid 1px #B9B4A1"
 22    }
;
 23    var opts = $.extend({}, $.fn.tablegrid.defaults, options);
 24    
 25    //拖动列宽
 26    var resize_columns = function(root)
 27    {                   
 28        var tbl = root.children("table");    //找到table
 29        var tr  = tbl.find("tr:first");   //找到第一行
 30        var header,newwidth;
 31        var resize = false;
 32        
 33        root.width(tbl.width()); //table的宽度
 34        tr.children("th").css("border-right",opts.col_border);  //给第一行的th加上一个css
 35        var left_pos = root.offset().left;
 36    
 37        endresize = function()
 38        {
 39            if(resize == true && header != null)
 40            {
 41                document.onselectstart=new Function ("return true");
 42                resize = false;
 43                root.children("table").css("cursor","");
 44            }
   
 45        }
;
 46        
 47        tbl.mousemove(function(e)
 48        {
 49            var left = (e.clientX - left_pos);
 50    
 51            if(resize)
 52            {
 53                var width = left - (header.offset().left - left_pos)
 54                    - parseInt(header.css("padding-left"))
 55                    - parseInt(header.css("padding-right"));
 56    
 57                if(width > 1)
 58                {
 59                    var current_width = header.width();
 60                    if(width > current_width)
 61                    {
 62                        var total = root.width() + ((width - header.width()));
 63                        root.width(total);
 64                        header.width(width);
 65                    }

 66                    else
 67                    {
 68                        header.width(width);
 69                        if(header.width() == width)
 70                        {
 71                            var total = root.width() + ((width - current_width));
 72                            root.width(total);
 73                        }

 74                    }

 75                    newwidth = width;
 76                }

 77            }

 78            else
 79            {
 80                if(e.target.nodeName == "TH")
 81                {
 82                    var tgt = $(e.target);
 83                    var dosize = (left-(tgt.offset().left-left_pos) 
 84                        > tgt.width()-4);
 85                    $(this).css("cursor",dosize?"col-resize":"");
 86                }

 87            }
                   
 88        }
);
 89        
 90        tbl.mouseup(function(e) 
 91        {
 92            endresize();
 93        }
);
 94                
 95        tbl.bind("mouseleave",function(e)
 96        {
 97            endresize();
 98            return false
 99        }
);
100        
101        tr.mousedown(function(e) 
102        {
103            if(e.target.nodeName == "TH" 
104                && $(this).css("cursor"==  "col-resize")
105            {
106                header = $(e.target);                    
107                resize = true;
108                document.onselectstart=new Function ("return false");
109            }
    
110            return false;
111        }
);
112        
113        tr.bind('mouseleave',function(e)
114        {
115            if(!resize)
116                root.children("table").css("cursor","");
117        }
);
118    }
;
119    
120    return this.each(function() {
121        var root = $(this).wrap("<div class='roottbl' />").parent();
122        resize_columns(root);
123        
124        //奇偶行上色
125        $(this).find('tr:odd > td').css('backgroundColor', opts.oddColor);
126        $(this).find('tr:even > td').css('backgroundColor', opts.evenColor);        
127        
128        $(this).find('tr').each(function(){
129            //--------------------------------------this为tr------------------------------------------
130            this.origColor = $(this).find('td').css('backgroundColor');    //未点击时的颜色
131            this.clicked = false;   //初始状态,设置bool变量clicked,以click事件触发此变量的true or false
132            if (opts.useClick) {
133                $(this).click(function(){  //此处的this是tr
134                    if (this.clicked) {
135                        $(this).find('td').css('backgroundColor'this.origColor);
136                        this.clicked = false;
137                    }
 else {
138                        $(this).find('td').css('backgroundColor', opts.selColor);
139                        this.clicked = true;
140                    }

141                    //$(this).find('td > input[@type=checkbox]').attr('checked', this.clicked);
142                }
);
143            }

144            //鼠标滑过及滑出事件
145            $(this).mouseover(function(){
146                $(this).find('td').css('backgroundColor', opts.overColor);
147            }
);
148            $(this).mouseout(function(){
149                if (this.clicked) {
150                    $(this).find('td').css('backgroundColor', opts.selColor);
151                }
 else {
152                    $(this).find('td').css('backgroundColor'this.origColor);
153                }

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

164            //--------------------------------------this为tr------------------------------------------
165        }
);
166    }
);
167}
;
168}
)(jQuery);

说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm
原文地址:https://www.cnblogs.com/bestfc/p/1527618.html