Table列宽可拖动

Table列宽可以由用户自己拖动。

搜索了一下，写了一个Demo，在IE8下可以，FireFox下有点问题。

代码如下：

View Code 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5 
  6    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  7 
  8     <script type="text/javascript">       
  9         $(function() {
 10             $("th").mouseover(function(Event) {                
 11                 if (Event.offsetX > $(this)[0].offsetWidth - 10) {
 12                     $(this).css("cursor", "col-resize");                  
 13                 }
 14                 else {
 15                     $(this).css("cursor", "default");                    
 16                 }                
 17             }).mouseout(function() {
 18                 $(this).css("cursor", "default");
 19                 $("#arealog").append("mouseout\r");
 20             }).mousedown(function(Event) {
 21                  if (!window.captureEvents) {
 22                      $(this)[0].setCapture();
 23                   } else {
 24                       window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 25                   }
 26                 //按下后才能拖动
 27                 $(this).data("IsDown", "T");                
 28                 $("#arealog").append("mousedown");
 29                 $("#arealog").append(Event.clientX);
 30                 $(this).data("OldX", Event.clientX);
 31                 $(this).data("OldoffsetWidth", $(this)[0].offsetWidth);
 32             }).mouseup(function(Event) {
 33                 if (!window.captureEvents) {
 34                     $(this)[0].releaseCapture();
 35                 } else {
 36                     window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 37                 }                
 38                 $(this).data("IsDown", "F");
 39                 $("#arealog").append("mouseup\r");               
 40             }).mousemove(function(event) {
 41                 $("#arealog").append($(this).data("IsDown"));
 42                 if (event.offsetX > $(this)[0].offsetWidth - 10) {
 43                     $(this).css("cursor", "col-resize");                    
 44                 }
 45                 else {
 46                     $(this).css("cursor", "default");                    
 47                 }
 48                 if ($(this).data("IsDown") != "T") {
 49                     return false;
 50                 }
 51                 $("#arealog").append("mousemove");
 52                 var newWidth = $(this).data("OldoffsetWidth") * 1 + event.clientX * 1 - $(this).data("OldX"); 
 53                 $("#arealog").append(newWidth);
 54                 if (newWidth > 0) {
 55                     $(this).width(newWidth);
 56                 }
 57             });            
 58         })
 59     </script>
 60 
 61 </head>
 62 <body>
 63     <div>
 64         <table border="1" width="100%">
 65             <tr>
 66                 <th>
 67                     列一
 68                 </th>
 69                 <th>
 70                     列二
 71                 </th>
 72                 <th>
 73                     列三
 74                 </th>
 75                 <th>
 76                     列四
 77                 </th>
 78                 <th>
 79                     列五
 80                 </th>
 81                 <th>
 82                     列六
 83                 </th>
 84                 <th>
 85                     列七
 86                 </th>
 87                 <th>
 88                     列八
 89                 </th>
 90             </tr>
 91             <tr>
 92                 <td>
 93                     列一
 94                 </td>
 95                 <td>
 96                     列二
 97                 </td>
 98                 <td>
 99                     列三
100                 </td>
101                 <td>
102                     列四
103                 </td>
104                 <td>
105                     列五
106                 </td>
107                 <td>
108                     列六
109                 </td>
110                 <td>
111                     列七
112                 </td>
113                 <td>
114                     列八
115                 </td>
116             </tr>
117             <tr>
118                 <td>
119                     列一
120                 </td>
121                 <td>
122                     列二
123                 </td>
124                 <td>
125                     列三
126                 </td>
127                 <td>
128                     列四
129                 </td>
130                 <td>
131                     列五
132                 </td>
133                 <td>
134                     列六
135                 </td>
136                 <td>
137                     列七
138                 </td>
139                 <td>
140                     列八
141                 </td>
142             </tr>
143             <tr>
144                 <td>
145                     列一
146                 </td>
147                 <td>
148                     列二
149                 </td>
150                 <td>
151                     列三
152                 </td>
153                 <td>
154                     列四
155                 </td>
156                 <td>
157                     列五
158                 </td>
159                 <td>
160                     列六
161                 </td>
162                 <td>
163                     列七
164                 </td>
165                 <td>
166                     列八
167                 </td>
168             </tr>
169             <tr>
170                 <td>
171                     列一
172                 </td>
173                 <td>
174                     列二
175                 </td>
176                 <td>
177                     列三
178                 </td>
179                 <td>
180                     列四
181                 </td>
182                 <td>
183                     列五
184                 </td>
185                 <td>
186                     列六
187                 </td>
188                 <td>
189                     列七
190                 </td>
191                 <td>
192                     列八
193                 </td>
194             </tr>
195             <tr>
196                 <td>
197                     列一
198                 </td>
199                 <td>
200                     列二
201                 </td>
202                 <td>
203                     列三
204                 </td>
205                 <td>
206                     列四
207                 </td>
208                 <td>
209                     列五
210                 </td>
211                 <td>
212                     列六
213                 </td>
214                 <td>
215                     列七
216                 </td>
217                 <td>
218                     列八
219                 </td>
220             </tr>
221             <tr>
222                 <td>
223                     列一
224                 </td>
225                 <td>
226                     列二
227                 </td>
228                 <td>
229                     列三
230                 </td>
231                 <td>
232                     列四
233                 </td>
234                 <td>
235                     列五
236                 </td>
237                 <td>
238                     列六
239                 </td>
240                 <td>
241                     列七
242                 </td>
243                 <td>
244                     列八
245                 </td>
246             </tr>
247             <tr>
248                 <td>
249                     列一
250                 </td>
251                 <td>
252                     列二
253                 </td>
254                 <td>
255                     列三
256                 </td>
257                 <td>
258                     列四
259                 </td>
260                 <td>
261                     列五
262                 </td>
263                 <td>
264                     列六
265                 </td>
266                 <td>
267                     列七
268                 </td>
269                 <td>
270                     列八
271                 </td>
272             </tr>
273             <tr>
274                 <td>
275                     列一
276                 </td>
277                 <td>
278                     列二
279                 </td>
280                 <td>
281                     列三
282                 </td>
283                 <td>
284                     列四
285                 </td>
286                 <td>
287                     列五
288                 </td>
289                 <td>
290                     列六
291                 </td>
292                 <td>
293                     列七
294                 </td>
295                 <td>
296                     列八
297                 </td>
298             </tr>
299             <tr>
300                 <td>
301                     列一
302                 </td>
303                 <td>
304                     列二
305                 </td>
306                 <td>
307                     列三
308                 </td>
309                 <td>
310                     列四
311                 </td>
312                 <td>
313                     列五
314                 </td>
315                 <td>
316                     列六
317                 </td>
318                 <td>
319                     列七
320                 </td>
321                 <td>
322                     列八
323                 </td>
324             </tr>
325         </table>
326     </div>
327     <div>
328         <textarea rows="25" cols="120" id="arealog">
329         
330         </textarea>
331     </div>
332 </body>
333 </html>

posted on 2012-07-04 17:21  thegavincheng  阅读(457)  评论(0)    收藏  举报