jquery 表格插件（奇偶行不同色，鼠标滑过变色，点击变色，双击动作，改变列宽）_建站学-个人建站指南,网页制作,网站设计,网站制作教程

参考tablegrid和resize两个插件，写到现在的插件，希望多多交流，直接上代码
第一次写插件，大家多多拍砖，我家房子就有望了～～～

/*
2

2009-7-3修改
3

作者：Allen
4

版权没有，随便使用
5

参考自tablegrid和tableresizer
6

功能
7

1，奇偶行不同色，鼠标滑过颜色效果，点击高亮
8

2，列宽可拖动
9

3，双击事件，在每行第一列取a的href值
10

*/
11

(function($) {
12

$.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

//拖动列宽
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

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

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

tbl.mousemove(function(e)
48

{
49

var left = (e.clientX - left_pos);
50

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

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

tbl.mouseup(function(e)
91

{
92

endresize();
93

});
94

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 (责任编辑：admin)

搜索

热门标签:

jquery 表格插件（奇偶行不同色，鼠标滑过变色，点击变色，双击动作，改变列宽）

搜索

热门标签:

jquery 表格插件 （奇偶行不同色，鼠标滑过变色，点击变色，双击动作，改变列宽）

jquery 表格插件（奇偶行不同色，鼠标滑过变色，点击变色，双击动作，改变列宽）