js简单的表拖拽_javascript技巧-JS Tutorial-php.cn

js简单的表拖拽_javascript技巧

WBOY

Release： 2016-05-16 19:04:38

Original

1050 people have browsed it

<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> 
 
<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"    style="max-width:90%"  style="max-width:90%" alt="js简单的表拖拽_javascript技巧" ></span>  
            </td>
</tr>
</table>
</div>