js简单的表拖拽

<html> 
<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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%3E%20%0D%0Afunction%20MouseDownToResize(obj)%7B%20%0D%0AsetTableLayoutToFixed()%3B%20%0D%0Aobj.mouseDownX%3Devent.clientX%3B%20%0D%0Aobj.pareneTdW%3Dobj.parentElement.offsetWidth%3B%20%0D%0Aobj.pareneTableW%3DtheObjTable.offsetWidth%3B%20%0D%0Aobj.setCapture()%3B%20%0D%0A%7D%20%0D%0Afunction%20MouseMoveToResize(obj)%7B%20%0D%0A%20%20%20%20if(!obj.mouseDownX)%20return%20false%3B%20%0D%0A%20%20%20%20var%20newWidth%3Dobj.pareneTdW*1%2Bevent.clientX*1-obj.mouseDownX%3B%20%0D%0A%20%20%20%20if(newWidth%3E0)%20%0D%0A%20%20%20%20%7B%20%0D%0Aobj.parentElement.style.width%20%3D%20newWidth%3B%20%0D%0AtheObjTable.style.width%3Dobj.pareneTableW*1%2Bevent.clientX*1-obj.mouseDownX%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20MouseUpToResize(obj)%7B%20%0D%0Aobj.releaseCapture()%3B%20%0D%0Aobj.mouseDownX%3D0%3B%20%0D%0A%7D%20%0D%0Afunction%20setTableLayoutToFixed()%20%0D%0A%7B%20%0D%0A%20if(theObjTable.style.tableLayout%3D%3D'fixed')%20return%3B%20%0D%0A%20%20%20var%20headerTr%3DtheObjTable.rows%5B0%5D%3B%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3CheaderTr.cells.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20headerTr.cells%5Bi%5D.styleOffsetWidth%3DheaderTr.cells%5Bi%5D.offsetWidth%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3CheaderTr.cells.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20headerTr.cells%5Bi%5D.style.width%3DheaderTr.cells%5Bi%5D.styleOffsetWidth%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20theObjTable.style.tableLayout%3D'fixed'%3B%20%0D%0A%7D%20%0D%0A%3C%2FSCRIPT%3E"> 
<body style="BORDER-top: #769ABE 1px solid;"> 
<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" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            选择 
            </TD> 
            <TD class="fixedHeaderTd"> 
            <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            订单号  
            </TD> 
            <TD class="fixedHeaderTd"> 
            <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            公司名称  
            </TD> 
            <TD class="fixedHeaderTd"> 
            <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            订单客户 
            </TD> 
            <TD class="fixedHeaderTd"> 
            <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            部门  
            </TD> 
            <TD class="fixedHeaderTd"> 
            <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            业务员 
            </TD> 
            <TD class="fixedHeaderTd"> 
            <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" width="3" height="18"></span>  
            交款方式 
            </TD> 
         </TR> 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox0.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox0.checked!=true){this.style.background ='#F5F6F8';}"> 
         <TD class="relativetd"> 
            <input name="checkbox0" type="checkbox" id="checkbox0"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox1.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox1.checked!=true){this.style.background ='#ffffff';}"> 
         <TD class="relativetd"> 
            <input name="checkbox1" type="checkbox" id="checkbox1"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox2.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox2.checked!=true){this.style.background ='#F5F6F8';}"> 
         <TD class="relativetd"> 
            <input name="checkbox2" type="checkbox" id="checkbox2"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox3.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox3.checked!=true){this.style.background ='#ffffff';}"> 
         <TD class="relativetd"> 
            <input name="checkbox3" type="checkbox" id="checkbox3"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox4.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox4.checked!=true){this.style.background ='#F5F6F8';}"> 
         <TD class="relativetd"> 
            <input name="checkbox4" type="checkbox" id="checkbox4"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox5.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox5.checked!=true){this.style.background ='#ffffff';}"> 
         <TD class="relativetd"> 
            <input name="checkbox5" type="checkbox" id="checkbox5"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="if(checkbox6.checked!=true){this.style.background ='#EBF2FF';}"  onMouseOut="if(checkbox6.checked!=true){this.style.background ='#F5F6F8';}"> 
         <TD class="relativetd"> 
            <input name="checkbox6" type="checkbox" id="checkbox6"    
            onClick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''"> 
         </TD> 
         <TD class="relativetd">1000000</TD> 
         <TD class="relativetd">中国电信</TD> 
         <TD class="relativetd">订单客户名称</TD> 
         <TD class="relativetd">广告部</TD> 
         <TD class="relativetd">王天一</TD> 
         <TD class="relativetd">现金</TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
         <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';"> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         <TD class="relativetd"> </TD> 
         </TR > 
          
               
    </table> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程