jQuery表格列宽可拖拽改变且兼容firfox

时间：2021-11-03 01:26:03

本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。

代码如下：

?
1
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script>
<mce:style><!--
.resizeDivClass
{
position:absolute;
background-color:gray;
width:2px;
height:15px;
z-index:1px;
display: block;
cursor:e-resize
}
.td1 {
font-size: 12px;
white-space:nowrap;
color:#0000ff;
}
--></mce:style><style mce_bogus="1">.resizeDivClass
{
position:absolute;
background-color:gray;
width:2px;
height:15px;
z-index:1px;
display: block;
cursor:e-resize
}
.td1 {
font-size: 12px;
white-space:nowrap;
color:#0000ff;
}</style>
<mce:script language=javascript><!--
/*
标题：扩拖拽列表格demo 1.2
设计：卢松强
博客：http://hi.csdn.net/andensy
日期：2010年4月26日
说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器
*/
/*
依赖于jQuery
*/
(function($){
//用正则表达式判断jQuery的版本
if (/1/.(0|1|2)/.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
alert('movedTh 需要 jQuery v1.2.6 以后版本支持! 你正使用的是 v' + $.fn.jquery);
return;
}
me=null;
var ps=3;
$.fn.movedTh=function(){
me=this;
var target = null;
var tempStr = "";
var i=0;
$(me).find("tr:first").find("th").each(function(){
tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)" ></div>';
var div={};
$(this).html($(this).html()+tempStr);
var offset = $(this).offset();
var pos=offset.left +$(this).width()+ me.offset().left-ps;
$("#mydiv"+i).addClass("resizeDivClass");
$("#mydiv"+i).css("left",pos);
$("#mydiv"+i).css("top",(offset.top+2));
i++;
}); //end each
} //end moveTh
$.fn.mousedone={
movedown:function(e,obj){
var d=document;
var e = window.event||e ;
var myX = e.clientX||e.pageX;
obj.mouseDownX=myX ;
obj.pareneTdW=$(obj).parent().width(); //obj.parentElement.offsetWidth;
obj.pareneTableW=me.width();
if(obj.setCapture){
obj.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
d.onmousemove=function(e){
var dragData=obj;
var event = window.event||e ;
if(!dragData.mouseDownX) return false;
var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX;
if(newWidth>0)
{
$(obj).parent().width(newWidth);
me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX);
var k=0;
me.find("tr:first").find("th").each(function(){
var offset = $(this).offset();
var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps;
$("#mydiv"+k).css("left",pos);
k++;
}) //end each
}//end if
};
d.onmouseup=function(e){
var dragData=obj;
if(dragData.setCapture)
{
dragData.releaseCapture();
}else if(window.captureEvents){
　　　　 window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);
}
dragData.mouseDownX=0;
}
}
} //end mousedone
$(window).resize(function(){
setTimeout(function() {
var target = null;
var tempStr = "";
var i=0;
$(me).find("tr:first").find("th").each(function(){
tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)" ></div>';
var div={};
$(this).html($(this).html()+tempStr);
var offset = $(this).offset();
var pos=offset.left +$(this).width()+ me.offset().left-ps;
$("#mydiv"+i).addClass("resizeDivClass");
$("#mydiv"+i).css("left",pos);
i++;
}); //end each
}, 10);
});
})(jQuery)
$().ready(function(){
$("#tab").movedTh();
})
// --></mce:script>
</head>
<body onload="">
<table cellpadding="3" id='' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >
<tr bgcolor=cccccc >
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>
</tr></table>
<br>
<table cellpadding="3" id='tab' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >
<tr bgcolor=cccccc >
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
</table>
</body>
</html>

 

标签：

相关文章