js简单的表拖拽_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:14

js简单的表拖拽_javascript技巧

js简单的表拖拽_javascript技巧: 脚本之家表拖拽效果代码 .mainDiv{padding:1px;overflow:auto;scrollbar-face-color:#DEEAF8;height:auto;width:expression(document.body.clientWidth); } .fixedHeaderTr{height:24px;backgro

推荐度：

点击下载本文 文档为doc格式

导读js简单的表拖拽_javascript技巧: 脚本之家表拖拽效果代码 .mainDiv{padding:1px;overflow:auto;scrollbar-face-color:#DEEAF8;height:auto;width:expression(document.body.clientWidth); } .fixedHeaderTr{height:24px;backgro

<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> 
 
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'; 
} 
 
<body style="BORDER-top: #769ABE 1px solid;"> 
 
 <table width="100%" cellspacing=0 style="margin:0;" id=theObjTable > 
 <TR class="fixedHeaderTr"> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 选择 
 </TD> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 订单号 
 </TD> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 公司名称 
 </TD> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 订单客户 
 </TD> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 部门 
 </TD> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 业务员 
 </TD> 
 <TD class="fixedHeaderTd"> 
 <img src="https://www.gxlcms.com/images/box1.gif" width="3" height="18"> 
 交款方式 
 </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需刷新才能执行]

js简单的表拖拽_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：表格技巧简单

热门焦点

js简单的表拖拽_javascript技巧

js简单的表拖拽_javascript技巧

js简单的表拖拽_javascript技巧

最新推荐

猜你喜欢

热门推荐