js简单的表拖拽- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js简单的表拖拽

Javascript: js 创建一个浮动div的代码; javascript下利用数组缓存正则表达式的实现方法; javascript 最常用的10个自定义函数[推荐]; jQuery 常见开发使用技巧总结; 十分钟打造AutoComplete自动完成效果代码; JavaScript 入门基础知识想学习js的朋友可以参考下; javascript 清空form表单中某种元素的值; javascript 格式化时间日期函数代码脚本之家修正版; javascript dom操作之cloneNode文本节点克隆使用技巧; jQuery 动态酷效果实现总结; jQuery中的常用事件总结; 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据; javascript+css 网页每次加载不同样式的实现方法; 向大师们学习Javascript（视频与PPT）; js 实现无干扰阴影效果简单好用（附文件下载）; JavaScript 拾漏补遗; IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点; jQuery的强大选择器小结; jquery $(document).ready() 与window.onload的区别; javascript 动态调整图片尺寸实现代码

No. « ‹ 254 255 256 257 › »

技术文章搜索

关键字

Javascript 中的 js简单的表拖拽

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 125 ::

收藏到网摘: n/a

通过修改referer下载文件的方法 javascript Error 对象错误处理

用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"> </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 全选提示:你可先修改部分代码,再按运行]

通过修改referer下载文件的方法 javascript Error 对象错误处理

Javascript 中的 js简单的表拖拽

评论 (0) All