js简单的表拖拽

更新时间：2008年05月15日 23:38:24 作者：

用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;"> <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" 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">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#ffffff';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                    <TR class="relativeTag1" onMousedown="this.style.background ='#D0E2FD';" onMouseOver="this.style.background ='#EBF2FF';"  onMouseOut="this.style.background ='#F5F6F8';">          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          <TD class="relativetd">&nbsp;</TD>          </TR >                              </table> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

js
表拖拽

javascript动画效果类封装代码
javascript动画效果类封装代码...
2007-08-08
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口,其实解决方法很简单如下。
2009-07-07
简单了解JavaScript中常见的反模式
这篇文章主要介绍了简单了解JavaScript中常见的反模式，反模式是指对反复出现的设计问题的常见的无力而低效的设计模式，俗话说就是重蹈覆辙。这篇文章描述了 JavaScript 中常见的一些反模式，以及避免它们的办法。,需要的朋友可以参考下
2019-06-06
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
这篇文章主要介绍了uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
微信小程序项目实践之九宫格实现及item跳转功能
这篇文章主要介绍了微信小程序项目实践之九宫格实现及item跳转功能,需要的朋友可以参考下
2018-07-07
iframe一次下载多个文件实例
这篇文章主要为大家介绍了iframe一次下载多个文件实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
用js实现层随着内容大小动态渐变改变推荐
以前做谷歌的小工具时，api里提供了一个很有用的函数，那就是在程序运行时可以使层动态随内容大小而变化，而且是平滑变换，在一些jquery的lightbox里也普遍有这种效果，看起来很酷的样子。
2009-12-12
js文件Cookie存取值示例代码
这篇文章主要介绍了js文件Cookie存取值的使用,需要的朋友可以参考下
2014-02-02
javascript事件冒泡实例分析
这篇文章主要介绍了javascript事件冒泡实原理,实例分析了事件冒泡的定义及实现技巧,需要的朋友可以参考下
2015-05-05
JavaScript你不知道的一些数组方法
这篇文章主要介绍了JavaScript你不知道的一些数组方法,需要的朋友可以参考下
2017-08-08

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

js简单的表拖拽

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具