JS实现可拖拽宽度表格

原创 2007年10月09日 16:01:00

将下面代码复制到body之后,可变宽度的表格id设为tbContent即可

var tbContent=document.getElementById("tbContent");
function fnInit()
...{
  
for(var i=0;i<tbContent.rows.length;i++)
  
...{
   
var _tr = tbContent.rows[i];
   
for(var j=0;j<_tr.cells.length;j++)
   
...{
    
var _td = _tr.cells(j);
    _td.noWrap 
= true;
    
if(i==0)
    
...{    
     _tr.attachEvent(
"onmousedown", fnMousedown);
     _tr.attachEvent(
"onmousemove",fnMousemove);
     _tr.attachEvent(
"onmouseover",fnMouseover);
     _tr.attachEvent(
"onselectstart",fnCancel);
     window.document.attachEvent(
"onmouseup", fnMouseup);
     window.document.attachEvent(
"onmousemove",fnMouseMove);
    }

    
else...{
     _td.style.borderRight 
= "1px solid #C0C0C0";
     _td.style.borderBottom 
= "1px solid #C0C0C0";
    }

   }

  
  
  }

  
var _line = window.document.createElement("DIV");
  _line.style.position 
= "absolute";
  _line.style.backgroundColor
="#000000";
  _line.style.width
=1;
  window.document.body.appendChild(_line);
  tbContent.splitLine 
= _line;
  tbContent.splitLine.style.display 
= "none";
}


function fnMouseover()
...{
 
return;
}


function fnMouseMove()...{
 
if(!tbContent.splitlocked) return;
 fnMousemove();  
}


function fnMousemove()...{
 
var oEl = event.srcElement;
 tbContent.splitLine.style.left 
= window.event.x;
 tbContent.splitLine.style.top 
= getTop(tbContent);
 tbContent.splitLine.style.height 
= tbContent.parentElement.clientHeight;
 
if(tbContent.splitlocked) return;
 
if(!IfSplitLocation(oEl)) return;
}


function fnClick()...{
 
var oEl = event.srcElement;
}


function fnMousedown()...{
 
var oEl = event.srcElement;
 
if(!IfSplitLocation(oEl)) return;
 tbContent.splitLine.style.display 
= "";
 tbContent.splitlocked  
= true;
 window.document.attachEvent(
"onselectstart",fnCancel);
}


function fnMouseup()
...{
 tbContent.splitLine.style.display 
= "none";
 tbContent.splitlocked  
= false;
 tbContent.document.body.style.cursor
='default';
 
if(tbContent.curResizeTD == nullreturn;
 
var otd = tbContent.curResizeTD;
 
var otdLeft = getLeft(otd);
 
var otdwidth =  tbContent.splitLine.style.pixelLeft - otdLeft
 
if(otdwidth < 0return;
 otd.style.width 
= otdwidth;
 window.document.detachEvent(
"onselectstart",fnCancel);
}


function IfSplitLocation(oEl)
...{
 
if(oEl.tagName == "DIV")
  oEl 
= oEl.parentElement;
 
if(oEl.tagName == "TD")
 
...{
  
if(Math.abs(event.offsetX - oEl.clientWidth) <= 5)
  
...{
   tbContent.curResizeTD 
= oEl;
   tbContent.document.body.style.cursor
='col-resize';
  }

  
else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0)...{
   
if(oEl.cellIndex>0)...{
    tbContent.curResizeTD 
= oEl.parentElement.cells(oEl.cellIndex-1);
    tbContent.document.body.style.cursor
='col-resize';
   }

  }

  
else...{
   tbContent.curResizeTD 
= null;
   tbContent.document.body.style.cursor
='default';
   
return false;
  }

 }

 
return true;
}


function getTop(e)...{
 
var t=e.offsetTop;
 
while(e=e.offsetParent)...{
  t
+=e.offsetTop;
  }

 
return t;
}


function getLeft(e)...{
 
var l=e.offsetLeft;
 
while(e=e.offsetParent)...{
  l
+=e.offsetLeft;
  }

 
return l;
}


/**//*****************************************************
禁止拖动
****************************************************
*/

function fnCancel()
...{
    window.event.returnValue 
= false;
 
return false;
}

window.onload
=fnInit; 

 本想把它加工成行高也可自动调整的,无奈水平有限。。。。

原生js实现 table表格列宽拖拽

http://www.cnblogs.com/guozhe/p/6092704.html 查看效果 1 2 3 4 5 ...
  • liangxw1
  • liangxw1
  • 2017-09-30 17:22:45
  • 667

一个可拖拽列宽表格demo

本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局。使用jQuery,方便函数的调用,给要处理的表格添加id后,直接调用$("#id").movedTh()即可方便...
  • andensy
  • andensy
  • 2010-04-21 15:31:00
  • 4722

jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

  • 2013年09月23日 17:25
  • 63KB
  • 下载

js拖动改变div的宽高

#box{position: absolute;top: 150px;left: 250px;width: 200px;height: 200px;background-color: red;} ...
  • Ag_wenbi
  • Ag_wenbi
  • 2016-10-13 16:20:52
  • 2827

js实现左侧边栏可拖动改变显示区域宽度

最近有这样的需求,需要实现左侧边栏能够拖动来改变显示的宽度。在网上发现的一个纯js的demo,觉得还不错,由于页面布局不一样,改动有点大,还没有应用到项目中。 先收藏起来,后期用得上,js用起来很方...
  • xiaojunjuns1
  • xiaojunjuns1
  • 2017-07-13 13:56:53
  • 692

表格列可拖动调整大小JS实现Demo

  • 2013年08月21日 14:16
  • 2KB
  • 下载

js 实现table每列可左右拖动改变列宽度

table 用户编号 试用时间转正时间性别姓名拼音 生日时间民族身高 2000001 1997-3-131997-3-131WZJ 1965-3-13汉171 ...
  • zanychou
  • zanychou
  • 2015-07-21 16:52:22
  • 16166

JS实现表格拖动

拖动列宽的表格 .bg td{ font-size:12px; text-align:left; line-height:15px; height:20px; } .bg td.tit{ ...
  • longvs
  • longvs
  • 2013-10-30 17:21:50
  • 4787

JS实现表格一列宽度拖拽

Code: >   html xmlns="http://www.w3.org/1999/xhtml">      head>   script language="ja...
  • xueyong4712816
  • xueyong4712816
  • 2011-06-01 10:50:00
  • 3427

使用HTML5拖拽实现表格列移动

纯前端的移动,不重载数据,不支持换页和数据刷新 实现代码,调用在表格加载完成之后 function add_drag_th(){ //允许放入 $("#callGrid tr>...
  • leiliz
  • leiliz
  • 2017-04-07 15:37:16
  • 3210
收藏助手
不良信息举报
您举报文章:JS实现可拖拽宽度表格
举报原因:
原因补充:

(最多只允许输入30个字)