js简单的表拖拽_javascript技巧

<title>脚本之家 表拖拽效果代码</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> .mainDiv{padding:1px;overflow:auto;scrollbar-face-color:#DEEAF8;height:auto;width:expression(document.body.clientWidth); } .fixedHeaderTr{height:24px;background:#D0E2FD;color:#000;text-align:center;} .fixedHeaderTd{height:24px;line-height:22px} .relativeTag{height:20px;background-color:#fff;} .relativeTag1{height:20px;background-color:#F5F6F8;} .relativetd{border:1px solid #f1f1f1;border-width:0 0 1px 0;padding:0 15px 0 5px;text-align:center;} .resizeDivClass{text-align:right;width:3px;margin:1px 0 1px 0;background:#eee;float:right;cursor:e-resize;} </style> <script> function MouseDownToResize(obj){ setTableLayoutToFixed(); obj.mouseDownX=event.clientX; obj.pareneTdW=obj.parentElement.offsetWidth; obj.pareneTableW=theObjTable.offsetWidth; obj.setCapture(); } function MouseMoveToResize(obj){ if(!obj.mouseDownX) return false; var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; if(newWidth>0) { obj.parentElement.style.width = newWidth; theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX; } } function MouseUpToResize(obj){ obj.releaseCapture(); obj.mouseDownX=0; } function setTableLayoutToFixed() { if(theObjTable.style.tableLayout=='fixed') return; var headerTr=theObjTable.rows[0]; for(var i=0;i<headerTr.cells.length;i++) { headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; } for(var i=0;i<headerTr.cells.length;i++) { headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; } theObjTable.style.tableLayout='fixed'; } </script> <div class="mainDiv" id="mailContainerDiv"> <table width="100%" cellspacing="0" style="margin:0;" id="theObjTable"> <tr class="fixedHeaderTr"> <td class="fixedHeaderTd"> <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" style="max-width:90%" style="max-width:90%" alt="js简单的表拖拽_javascript技巧" ></span> </td> </tr> </table> </div>