`
will-vip
  • 浏览: 40901 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

js实现拖动table列,改变列宽

阅读更多

这两天看了一些关于table列拖动的js代码,怕忘记了,贴上来摆着。

第一个,这个关于兼容方面应该比较好,不过拖动响应鼠标的事件感觉不是太好:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {}{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
}
-->
</style>
</head>

<body>
<div>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
 <colgroup>
  <col style="width:200px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
 </colgroup>
 <thead>
 <tr>
  <td>拖动我1</td>
  <td>拖动我2</td>
  <td>拖动我3</td>
  <td>拖动我4</td>
  <td>拖动我5</td>
 </tr>
 </thead>
 <tr>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
 </tr>
 <tr>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
 </tr>
 <tr>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
 </tr>
 <tr>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
 </tr>
 <tr>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
  <td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
 </tr>
</table>
</div>
<script language="javascript" type="text/javascript">
var JPos = {};
(function($){
 
 $.getAbsPos = function(pTarget){
  var x_ = y_ = 0;
 
  if(pTarget.style.position != "absolute"){ 
   while(pTarget.offsetParent){
     x_ += pTarget.offsetLeft;
     y_ += pTarget.offsetTop;
     pTarget = pTarget.offsetParent;
   }
  }
   x_ += pTarget.offsetLeft;
   y_ += pTarget.offsetTop;
  return {x:x_,y:y_};
 }

 $.getEventPos = function(evt){
   var _x,_y;
   evt = JEvent.getEvent(evt);
   if(evt.pageX || evt.pageY){
    _x = evt.pageX;
    _y = evt.pageY;
   }else if(evt.clientX || evt.clientY){
    _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
    _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
   }else{
    return $.getAbsPos(evt.target);
   }
   return {x:_x,y:_y};
 }
 
})(JPos);


//=======================================================================================

var JEvent = {};
(function($){
 $.getEvent = function(evt){    
  evt = window.event || evt;
    
  if(!evt){
   var fun = JEvent.getEvent.caller;
   while(fun != null){
    evt = fun.arguments[0];
    if(evt && evt.constructor == Event)
     break;
    fun = fun.caller;
   }
  }
  
  return evt;
 }
 
 $.doEvent = function(fun){
  var args = arguments;
  return function(){
   return fun(args);
  }
 }
})(JEvent);
//=======================================================================================

var colIndex;
var dataTable = document.getElementById("dataTable");
var cols = dataTable.getElementsByTagName("COL");

var dragMask = document.createElement("DIV");
var mAWidth = mAHeight = 30;
document.body.insertBefore(dragMask,document.body.lastChild);
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";

var mask_mousemove = function(evt){
 if(document.selection){//IE ,Opera
  if(document.selection.empty)
   document.selection.empty();//IE
  else{//Opera
   document.selection = null;
  }
 }else if(window.getSelection){//FF,Safari
  window.getSelection().removeAllRanges();
 }
 
 var oPos = JPos.getAbsPos(this);
 var mPos = JPos.getEventPos(evt);
 
 var x = mPos.x - oPos.x - mAWidth / 2;
 var tmpX = parseInt(cols[colIndex].style.width) + x;
 dragMask.style.left = mPos.x - mAWidth / 2 + "px";
 cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
 if(!document.all)
  dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
}

var mask_mouseup = function(evt){
 dragMask.style.display = "none";
}

dragMask.onmousemove = mask_mousemove;
dragMask.onmouseup = mask_mouseup;

var cell_mousedown = function(evt){
 colIndex = this.colIndex;
 var mPos = JPos.getEventPos(evt);
 with(dragMask.style){
  left = mPos.x - mAWidth / 2  + "px";
  top = mPos.y - mAHeight / 2 + "px";
  display = "";
 }
}

var chk_click = function(evt){
 var obj = cols[this.colIndex];
 if(this.checked){
  obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
 }else{
  obj.css_ = obj.style.cssText;
  obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
 }
}

var i , o;
var label ,chk;
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
 o.colIndex = i;
 o.onmousedown = cell_mousedown;
 
 label = document.createElement("LABEL");
 document.body.insertBefore(label,document.body.lastChild);
 chk = document.createElement("INPUT");
 chk.type = "checkbox";
 label.appendChild(chk);
 chk.onclick = chk_click;
 chk.colIndex = i;
 chk.checked = "checked";
 label.appendChild(document.createTextNode(o.innerHTML));
}
</script>
</body>
</html>


第二个

<html>
<title>table拖动(兼容Firefox 3.5/IE6),固定表格宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"><!--
.bg {
font-size:12px;
color:#000000;
table-layout:fixed;//这个属性可以隐藏文字
}
.bg td{
font-size:12px;
color:#000000;
text-align:left;
line-height:15px;
height:20px;
}
.bg td.tit{
background-color:#e2e2e2;
color:#000;
height:17px;
text-align:center;
line-height:15px;
}
.bg td.num{
background-color:#e2e2e2;
color:#000;
text-align:right;
line-height:15px;
height:22px;
width:30px;
}
.resizeDivClass{
text-align:right;
width:3px;
margin:0px 0 0px 0;
background:#fff;
border:0px;
float:right;
cursor:e-resize;
}
--></style>
<script type="text/javascript"><!--
window.onload=function(){
drag(document.getElementById('drag'));
drag(document.getElementById('drag2'));
drag(document.getElementById('drag3'));
drag(document.getElementById('drag4'));
};
function drag(o,r){
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度,兼容IE6和Firefox*/{
if(window.ActiveXObject){
return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth;
}else{
return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-
parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2;
}
}

o.p_p_p_sw=function(index,w)/*设置所有行的第index个单元格为w,在IE下可只设第一行*/{
for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++) {
o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w;
}
}

var out=document.getElementById('my');

o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var lastX=a.clientX;
var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);//有时候拖拽过快表格会变大,至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大,
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
//
d.onmousemove=function(a){
if(!a)a=window.event;
if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog){
o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0));
return;
}
var t=a.clientX-lastX;out.innerHTML=t;
if(t>0) {//right
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
} else {//left
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
}
lastX=a.clientX;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
// --></script>
<body >
<table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >
<tr >
<td class="num" >序号</td>
<td class="tit" >
<span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
公司名称
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
订单客户
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
部门
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
业务员
</td>
<td class="tit" >

交款方式
</td>
</tr>
<tr >
<td class="num" >1</td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="javascript:showJobCommentDialog(2325,%20null);">未到期 (30天)</a></td></tr></table></div></td>
<td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div></td>
<td >广告部</td>
<td >王天一</td>
<td >现金</td>
</tr >
</table>

 
<div id="my"></div>
<div id="my2"></div>
</body>
</html>

 

还有个拖动列的,改变列顺序:

<html>
<head>
</head>
<body ondragstart="oDragStart()"> 
<SCRIPT LANGUAGE="JavaScript"> 
<!--  
var isFromCellIndex,isToCellIndex;  
 
function oDragStart(){  
    if (event.srcElement.tagName=="TD")  
   {  
       window.event.dataTransfer.effectAllowed="move";  
        isFromCellIndex=event.srcElement.cellIndex;//开始drag时表格列索引  
   }  
     
}  
function oDragEnd(){  
    var isValue,i,isCellIndex;  
      
       if (event.srcElement.tagName=="TD"){  
          
               isToCellIndex=event.srcElement.cellIndex;//结束drag时表格列索引  
               //如果  
               if (isFromCellIndex<isToCellIndex){  
                   for(i=0;i<document.all.oTable.rows.length;i++){  
                       isValue=document.all.oTable.rows(i).cells(isFromCellIndex).innerText;  
                  
                       for(isCellIndex=isFromCellIndex;isCellIndex<isToCellIndex;isCellIndex++){  
                            document.all.oTable.rows(i).cells(isCellIndex).innerText=document.all.oTable.rows(i).cells(isCellIndex+1).innerText;  
                          }  
                       document.all.oTable.rows(i).cells(isToCellIndex).innerText=isValue;  
                      }  
 
                   }  
               else{  
                   for(i=0;i<document.all.oTable.rows.length;i++){  
                       isValue=document.all.oTable.rows(i).cells(isFromCellIndex).innerText;  
                         
                       for(isCellIndex=isFromCellIndex;isCellIndex>isToCellIndex;isCellIndex--){  
                            
      
                            document.all.oTable.rows(i).cells(isCellIndex).innerText=document.all.oTable.rows(i).cells(isCellIndex-1).innerText;  
 
                          }  
                       document.all.oTable.rows(i).cells(isToCellIndex).innerText=isValue;  
                     }  
                  
                 }  
           }  
 
 
}  
function oSelect(){  
if (event.srcElement.tagName=="TD")  
   {  
       var oRange=document.body.createTextRange();  
           oRange.moveToElementText(event.srcElement);  
           oRange.select();  
            
   }  
}  
//--> 
</SCRIPT> 
<TABLE  id="oTable" width="400px" onmouseover="oSelect()"  ondragenter="return false;" ondragover="return false;" ondrop="oDragEnd()" border> 
<TR> 
    <TD>第一列</TD><TD>第二列</TD><TD>第三列</TD><TD>第四列</TD> 
</TR> 
<TR> 
    <TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD> 
</TR> 
<TR> 
    <TD>1</TD><TD>4</TD><TD>3</TD><TD>4</TD> 
</TR> 
<TR> 
    <TD>7</TD><TD>w</TD><TD>7</TD><TD>4</TD> 
</TR> 
<TR> 
    <TD>1</TD><TD>1</TD><TD>3</TD><TD>4</TD> 
</TR> 
</TABLE><br>  
</body>
</html>

分享到:
评论
1 楼 bishen 2011-05-21  
试了,很不错,兼容

相关推荐

    拖动table单元格改变列宽或行高

    本文将深入探讨如何实现“拖动table单元格改变列宽或行高”的功能,以及这一特性在表格设计器中的应用。 首先,我们要理解HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素定义,包含多个`&lt;tr&gt;`(行)元素,每个`...

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    vue-easytable表格老版本有表格列宽拖功能,但是最新版插件反而不存在该功能,但是大部分表格数据存在...若将ve-table封装以组件形式引用,可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。

    实现bootstrap table可设置列宽和可拖动列宽

    - `bootstrap-table-colresize.min.js`:拖动列宽插件的 JavaScript 文件,实现拖动功能。 - 示例 HTML 文件:展示如何在实际代码中应用以上设置和插件。 - 示例数据文件:可能包含用于填充表格的数据。 总之,实现...

    bootstrap-table拖拽表格改变列宽

    在“bootstrap-table拖拽表格改变列宽”这个主题中,我们将深入探讨如何实现用户可以动态调整表格列宽的功能,同时确保兼容主流浏览器,并保持表格的body部分与header部分对齐。 首先,我们需要引入必要的CSS和JS库...

    拖动单元格改变列宽或行高

    总的来说,"拖动单元格改变列宽或行高"是一个提升用户交互体验的重要特性,而oDragTable.js插件则提供了一种简便的方式来实现这一功能。对于希望提升网页表格操作体验的开发者来说,这是一个值得研究和使用的工具。

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求,特别是在数据展示或者数据分析的应用中,用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    用于设置ant-design-vue中table组件的列宽可拖拽

    vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽

    html表格table调整列宽的例子

    ZTable插件的工作原理是监听用户的鼠标事件,当用户在列边界上拖动时,插件会计算出新的列宽,并实时更新表格样式。这样,用户就可以根据需要自由调整列宽,而无需开发者编写复杂的事件处理代码。 在实际应用中,...

    Table 列宽拖动

    当鼠标在table两列头之间时,鼠标变成双箭头,拖动鼠标可以调节table列的宽度。

    table得列宽拖拽插件

    这个"table列宽拖拽"插件的工作原理是监听用户的鼠标事件,如鼠标按下、移动和释放,当用户在表头(th)上进行拖拽操作时,插件会计算出新的列宽,并相应地更新表格的CSS样式,从而实现列宽的动态调整。此过程涉及到...

    鼠标拖动调整table列宽实例

    "鼠标拖动调整table列宽实例" 是一种增强表格功能的常见技术,特别是在数据展示和分析的场景中。这个实例利用JavaScript实现,允许用户通过简单的鼠标操作来动态调整表格列的宽度,从而更好地查看和理解数据。 ...

    可调整列宽TABLE

    总的来说,实现“可调整列宽TABLE”需要结合HTML的表格结构、CSS的样式控制以及JavaScript的交互逻辑,通过拖动操作实现列宽的动态调整,同时保证内容的展示和表格的自适应性。这样的设计提高了用户体验,使得用户...

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

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中,通过拖动表头来任意调整列宽度的功能,这个功能适用于各种列表页面,如数据展示、报表分析等场景。 首先,我们需要引入jQuery库,它是...

    js实现html表格列宽可拖拽修改

    js实现html表格列宽可拖拽修改 .

    原生javascript实现拖拽改变table表格行高(html)

    标题提到的“原生javascript实现拖拽改变table表格行高”是一项技术挑战,因为大部分在线资源都集中在改变列宽上,而对行高的调整相对较少。 首先,我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义,内部...

    html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo.rar

    用户可以通过拖动列边框来改变列宽。通常,这需要监听鼠标事件,如`mousedown`、`mousemove`和`mouseup`,并在这些事件之间计算并更新列的宽度。此外,可能还会涉及到一些布局的调整,确保整个表格的对齐和显示效果...

    Bootstrap Table列宽拖动的方法

    实现Bootstrap Table列宽拖动功能需要使用Resizable扩展插件。Resizable插件是一个可选功能,它允许表格列宽能够被拖动调整。要使用这个功能,首先需要引入Resizable插件的相关文件。根据文件内容,需要引入两个js...

    bootstrap table实现列拖动.rar

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽。Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...

    改变el-table宽度

    在给定的场景中,开发者想要实现一个功能,即允许用户通过拖动表格列宽来调整列的宽度,并将这些自定义设置保存到浏览器的localStorage中,以便在用户下次访问时恢复这些设置。这个功能可以提供更好的用户体验,让...

Global site tag (gtag.js) - Google Analytics