<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript>
function MouseDownToResize(obj)
{
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;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownX=0;
}
</script>
</head>
<body>
拖动表列改变table的列宽度
<table id=theObjTable border=1 >
<tr >
<td >
<font onmouseup="MouseUpToResize(this);" onmousemove="MouseMoveToResize(this);" onmousedown="MouseDownToResize(this);" style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" >
</font>列一
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);">
</font>列二
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);">
</font>列三
</td>
</tr>
<tr >
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);">
</font>列一
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);">
</font>列二
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);">
</font>列三
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
js实现table列头拖拽，。。。。。。
table 列可左右拖动，随着内容增多，会出现横拉条，兼容谷歌核心和IE8以上浏览器。
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用...Bootstrap Table可拖动列，需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js
js拖拽Table表格列排序.rar
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
拖拽改变列宽的功能网上很多，但是拖拽改变行高的我搜了很久，也没有发现可以用的。所以利用原有改变行高的模版，自己写了一个原生javascrript改变列宽的模版。
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
js table 表头拖动 适应各种主流浏览器很好的用户体验度
bootstraptable拖拽js
colResizable.js 全版本 1.0-1.6 table列可拖动宽度插件 有demo
纯js实现对table的列宽和列数操作 .
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
bootstraptable拖拽js 包含 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
bootstrap-table-reorder-columns表格拖拽排序列的一个插件
可拖动的table #draggable{ padding:absolute; height:600px; position:absolute; } <script type="text/javascript"> var rDrag = { o:null, init:function(o){ o.onmousedown = this.start; }, start:...
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并...
实现了bootstrapTable 的列宽可鼠标拖动，方便查看列宽显示不完全的内容，前台js
js实现像excel表格锁定功能，拖动滚动条指定锁住的列不滚动，内容使用的是table表格 使用代码： var Options = { table : "tb", width : 600, height : 300, rows : 1, cells : 2 } new Fixed(Options);
一款非常不错的表格列自由拖动排序js代码，单击鼠标长按表格列自由拖动排序，互换列排序代码，点击表格头部支持表格数据升降大小排序效果。