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 阅读(443) 评论(0) 编辑 收藏 举报
