参考tablegrid和resize两个插件,写到现在的插件,希望多多交流,直接上代码
第一次写插件,大家多多拍砖,我家房子就有望了~~~
说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm
第一次写插件,大家多多拍砖,我家房子就有望了~~~
1
/*
2
2009-7-3修改
3
作者:Allen
4
版权没有,随便使用
5
参考自tablegrid和tableresizer
6
功能
7
1,奇偶行不同色,鼠标滑过颜色效果,点击高亮
8
2,列宽可拖动
9
3,双击事件,在每行第一列取a的href值
10
*/
11
(function($) {
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
89
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
90
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
91
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
92
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
94
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
95
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
96
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
97
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
98
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
99
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
100
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
101
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
102
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
103
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
104
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
105
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
106
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
107
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
108
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
109
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
110
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
111
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
112
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
113
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
114
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
115
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
116
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
117
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
118
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
119
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
120
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
121
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
122
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
123
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
124
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
125
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
126
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
127
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
128
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
129
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
130
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
131
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
132
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
133
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
134
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
135
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
136
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
137
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
138
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
139
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
140
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
141
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
142
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
143
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
144
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
145
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
146
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
147
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
148
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
149
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
150
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
151
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
152
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
153
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
154
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
155
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
156
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
157
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
158
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
159
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
160
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
161
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
162
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
163
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
164
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
165
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
166
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
167
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
168
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm