js简单的表拖拽 | 学步园

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

js简单的表拖拽

2012年06月03日 ⁄ 综合 ⁄ 共 1179字 ⁄ 字号小中大 ⁄ 评论关闭

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br />
<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>
<p><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>
<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><br />
            选择
            </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><br />
            订单号
            </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><br />
            公司名称
            </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><br />
            订单客户
            </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><br />
            部门
            </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><br />
            业务员
            </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><br />
            交款方式
            </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>
<p>

返回

【上篇】【Forward】OAuth介绍 – 协议解析http://plaintext.blog.edu.cn
【下篇】《Developing Distributed Services Today》

作者: urination

该日志由 urination 于12年前发表在综合分类下，最后更新于 2012年06月03日.
转载请注明: js简单的表拖拽 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园保留所有权利.
软文销售 QQ客服：2265327166

点击这里给我发消息

（其他合作也可洽谈）