Home > Article > Web Front-end > js简单的表拖拽_javascript技巧

js简单的表拖拽_javascript技巧

WBOYOriginal: 2016-05-16 19:04:38999browse

<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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A zoom container that imitates animation_Typical special effectsNext article：A zoom container that imitates animation_Typical special effects

See more

js简单的表拖拽_javascript技巧

Related articles