<html>
<head>
<style>
.resizeDivClass
{
position:relative;
width:4;
z-index:1;
left:expression(this.parentElement.offsetWidth - 3);
cursor:e-resize;
}
.resizeDivClass2
{
position:relative;
width:expression(this.parentElement.offsetWidth);
height:1px;
border: solid 0px;
z-index:1;
top:expression(this.parentElement.offsetHeight - 5);
cursor:n-resize;
}
</style>
<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;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownX=0;
}
function MouseDownToResize2(obj)
{
obj.mouseDownY = event.clientY;
obj.pareneTrH = obj.parentElement.offsetHeight;
obj.pareneTableH=theObjTable.offsetHeight;
obj.setCapture();
}
function MouseMoveToResize2(obj)
{
if(!obj.mouseDownY)
{
return false;
}
var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;
if(newWidth > 0)
{
obj.parentElement.style.height = newWidth;
theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;
}
}
function MouseUpToResize2(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</script>
</head>
<body>
改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" border="1" >
<tr bgcolor=cccccc >
<td valign=top >
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>
aaa
</td>
<td valign=top >
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
<td valign=top >
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
通过查看和分析这个文件，你可以更深入地了解如何用原生JavaScript实现拖拽改变表格行高的具体细节。 最后，这样的功能可以广泛应用于数据展示、编辑表格等场景，让用户可以根据需要自由调整表格的布局，提高其在...
"table表格拖动改变td宽度"这一功能，正是为了提升用户体验，允许用户通过拖动来动态调整表格单元格(`td`)的宽度，使得数据的查看和操作更加灵活便捷。 实现这一功能通常涉及到以下几个关键知识点： 1. **HTML ...
"拖动单元格改变列宽或行高"是一种提升用户体验的功能，允许用户通过拖动单元格边框来调整表格的列宽和行高，以适应他们的阅读或编辑需求。这个功能尤其适用于数据密集型的应用，如电子表格或者数据展示平台，它提供...
拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在列表、菜单和表格中尤为常见，提供了直观和便捷的操作体验。在JavaScript中，我们可以监听鼠标事件来实现这一功能。 二、jQuery实现...
标题“JS完美拖拽+拖动改变Div的宽高+关闭按钮”涉及到的是JavaScript实现的交互功能，主要包括三个部分：元素的拖拽、拖动时动态调整元素尺寸以及添加关闭按钮的功能。以下是对这些知识点的详细说明： 1. **元素...
这种功能允许用户通过鼠标拖放操作来改变表格中行或列的顺序，提升数据管理的便捷性。下面我们将深入探讨如何使用JS实现这样的功能。 首先，实现可拖动的表格，需要用到HTML5的`<draggable>`属性和`dragstart`, `...
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
在给定的文件“表格设计器拖动单元格改变列宽或行高(JS插件)”中，可能包含了实现这个功能的源代码和示例。使用这类插件可以大大简化开发工作，提高效率，同时也更容易维护和扩展。 总之，“拖动table单元格改变...
【标题】"js表格列拖动排序代码.zip"是一个压缩包，其中包含了实现JavaScript（JS）表格列拖动排序功能的代码。这个功能允许用户通过鼠标长按表格的列头来自由地拖动和排序列，实现列之间的互换，同时提供升序或降序...
js 实现 拖动表格行改变顺序! 值得下载看看!资源免费,大家分享!!
在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...
js实现html表格列宽可拖拽修改 .
本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能，从而使用户可以根据需要调整表格的列宽，提高用户界面的可定制性和交互性。 colResizable是一个轻量级的jQuery插件，它为HTML表格...
这款"表格列自由拖动排序js代码"提供了这样一个功能，允许用户通过单击并长按表格的列头来自由移动列的位置，从而根据需要调整表格的布局。同时，它还支持点击表格头部进行数据的升序或降序排列，这在处理大量数据时...
在本主题中，我们关注的是"bootstrap-table.css 表格拖拽排序"，这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景，比如任务管理或者项目进度跟踪。 ...
项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一个控件，结果简单的一个拖动交换行，就要引入七八个js library，太麻烦了。就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流...
"js表格内容拖拽效果.zip"这个资源提供了一种创新的解决方案，它包含了10个不同的示例，展示了如何在网页表格中实现内容的拖放功能。这种功能可以让用户通过简单的鼠标操作，自由地将表格内的数据从一个单元格移动到...
标题“任意改变table表格td的宽度 支持表格TD拖拽”和描述中反复提到的“动态td的宽度”，就是指这种功能，即允许用户通过拖动来调整表格单元格的宽度。 实现这一功能通常需要结合JavaScript（或者更高级的库如...
在Vue.js框架中实现一个可拖拽的树形表格是一项技术挑战，涉及到组件设计、事件处理、数据管理和DOM操作等多个方面。Vue.js以其简洁的API和强大的响应式系统深受开发者喜爱，而添加拖拽功能则需要用到HTML5的Drag ...
在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...