js简单的表拖拽-技术开发JavaScript技术-Ubuntu系统_Ubuntu服务器

<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>  <body style="BORDER-top: #769ABE 1px solid;">      <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="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.gif" width="3" height="18"></span>              选择             </TD>             <TD class="fixedHeaderTd">             <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.gif" width="3" height="18"></span>              订单号              </TD>             <TD class="fixedHeaderTd">             <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.gif" width="3" height="18"></span>              公司名称              </TD>             <TD class="fixedHeaderTd">             <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.gif" width="3" height="18"></span>              订单客户             </TD>             <TD class="fixedHeaderTd">             <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.gif" width="3" height="18"></span>              部门              </TD>             <TD class="fixedHeaderTd">             <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.gif" width="3" height="18"></span>              业务员             </TD>             <TD class="fixedHeaderTd">             <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/bf1fbc809537baf749d4f30e537dfa8c.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需刷新才能执行]

JavaScript技术：js简单的表拖拽，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

相关文章阅读