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; 

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

jquery 插件--如何通过鼠标拖动改变表格列的宽度

需要准备:1. jquery 1.6.2版本(高的版本不能支持,不知原因);                     2. colResizable-1.3.min.js;     *大家可以到我的网...
  • byc233518
  • byc233518
  • 2015年10月21日 09:07
  • 2136

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

http://www.cnblogs.com/guozhe/p/6092704.html 查看效果 1 2 3 4 5 ...
  • liangxw1
  • liangxw1
  • 2017年09月30日 17:22
  • 399

表格td边框可左右拖动的实例

  • 2012年06月30日 15:42
  • 23KB
  • 下载

js实现表格列的位置拖拽

转载请注明出处:http://blog.csdn.net/sllailcp/article 公司突然出了新需求,拖拽表格的列到指定的列,去网上找了下,没有合适产品需求的,就自己写了个小功能。 具...
  • l284969634
  • l284969634
  • 2016年10月09日 13:32
  • 1349

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

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

js实现表格列的位置拖拽

转载请注明出处:http://blog.csdn.net/sllailcp/article 公司突然出了新需求,拖拽表格的列到指定的列,去网上找了下,没有合适产品需求的,就自己写了个小功能。 具...
  • l284969634
  • l284969634
  • 2016年10月09日 13:32
  • 1349

jQuery插件来调整表列的大小colResizable.js 拖动改变单元格宽度

jQuery插件来调整表列的大小官网地址:http://www.bacubacu.com/colresizable/github项目地址:https://github.com/ybx13579/res...
  • YangBingX
  • YangBingX
  • 2017年06月14日 11:31
  • 2699

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

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

原生JS表格行拖动排序,添加了回调功能

function tableDnD(el, callback) { if (typeof (el) == "string") { el = document.getElemen...
  • apollokk
  • apollokk
  • 2015年11月14日 14:07
  • 1454

jquery可拖动表格调整列格子的宽度大小

谷歌浏览器下运行 jquery可拖动表格调整列格子的宽度大小 table{border-collapse:collapse;border-spacing:0;} .listext t...
  • u010081710
  • u010081710
  • 2015年09月28日 16:01
  • 1808
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS实现可拖拽宽度表格
举报原因:
原因补充:

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