利用JS实现可以自由拖拽调整宽度的表格

dcren118

于 2007-03-13 16:36:00 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/dcren118/article/details/1528123

版权

本文介绍了一种使用JavaScript实现表格单元格拖动调整宽度的方法。通过监听鼠标事件，设置div元素作为分割线，允许用户在表格列边界处拖动以改变列宽。同时，提供了阻止默认选中行为的函数，确保拖动过程流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// JScript 文件
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