jquery 表格插件 (奇偶行不同色,鼠标滑过变色,点击变色,双击动作,改变列宽) --半原创
参考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
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);

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm
作者:黑曜石
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?