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> <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> <body style="BORDER-top: #769ABE 1px solid;"><table width="100%" cellspacing=0style="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" 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" 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" 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" 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" 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" 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" 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></body> </html>

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