`
holdbelief
  • 浏览: 704977 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript实现Table行和列的拖动

JavaScript浏览器HTML 
阅读更多

Table表格拖动， 既可以拖动行，也可以拖动列。代码如下：

 

<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>
			快乐不是因为拥有的多，而是计较的少。
		</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>  
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</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> 
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</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> 
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</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 父窗口（父页面）— 子窗口 ( ...
评论
12 楼 mazzystar 2009-05-20  
附件  好
11 楼 冯冀川 2009-05-19  
考虑到不同浏览器的兼容性，对table内的元素进行拖动基本不太现实
10 楼 空月凌风 2009-05-13  
LZ，这段代码你说的功能一点都没有实现！请检查！
9 楼 hfknight 2009-02-08  
请问为何在ff3下无效果？
8 楼 hanjs 2009-02-08  
下次传个附件多好啊。也能避免代码错误的问题。

ie7下也能实现拖拽
7 楼 kendy 2009-02-04  
xuyao 写道
楼主的代码测过吗？

在IE8上经过测试，既不可以拖动行，也不可以拖动列。
6 楼 holdbelief 2008-12-18  
fins 写道

楼主 提供个 附件会不会更好一些??

我测试过，我在单位做打印模块时，用的就是这段代码，对于附件，其实这只有一片文档，你把它复制到一个记事本里，然后把后缀改成.html，保存就可以看到结果了。
5 楼 holdbelief 2008-12-18  
zhangshuling1214 写道

在代码的第60行 objobj.pareneTrH = obj.parentElement.offsetHeight;&nbsp;&nbsp;&nbsp;&nbsp; 应该是 obj.pareneTrH = obj.parentElement.offsetHeight;&nbsp;&nbsp;&nbsp;&nbsp; 还是很不错的东西


我不知道为什么，我已经注意到这个问题，但是当我打开文档的编辑状态时，第60行确确实实只有一个obj，但我已提交保存，就变成两个obj了。很灵异的想象...
4 楼 xuyao 2008-12-17  
楼主的代码测过吗？
3 楼 wangyl_2008 2008-12-17  
33行多 obj
2 楼 fins 2008-12-17  
楼主 提供个 附件会不会更好一些??
1 楼 zhangshuling1214 2008-12-17  
在代码的第60行
objobj.pareneTrH = obj.parentElement.offsetHeight;    
应该是
obj.pareneTrH = obj.parentElement.offsetHeight;    

还是很不错的东西
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vue Element ui实现table列拖动效果

    Vue.js 是一款非常流行的前端框架，它以其轻量级、高效和易用性著称。Element UI 是基于 Vue 的一套组件...通过以上的实现方式，你可以在 Vue 和 Element UI 项目中轻松地创建一个支持列拖动的表格，提升用户交互体验。

    实现table表格可按行拖拽，按列排序，并可以保存排序后的结果

    "实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    原生javascript实现拖拽改变table表格行高（html）

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

    elementui table列的拖拽功能

    ElementUI 是一个基于 Vue.js 的开源 UI ...总之，实现 ElementUI Table 列的拖拽功能需要对 Vue 的响应式系统和 HTML5 拖放API有深入理解。通过结合这两者，我们可以创建出动态且用户友好的界面，提供更佳的交互体验。

    table 列可左右拖动

    "table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...

    javascript 拖动表格行和列

    在JavaScript编程中，拖动表格行和列...总的来说，实现JavaScript拖动表格行和列的功能需要理解DOM操作、事件处理、CSS定位以及可能的第三方库的运用。通过实践和调试，你可以创造出更加动态和交互丰富的Web表格应用。

    table实现列宽的拖动效果

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

    bootstrapTable实现列宽可拖动

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

    table列排序、列拖动、列宽度变化、行交换

    "table列排序、列拖动、列宽度变化、行交换"这些功能是网页数据展示中常见的需求，能够极大地提升用户操作的便捷性和数据管理的有效性。下面我们将详细探讨这些知识点。 首先，**表头列排序**是一种常见于数据表格...

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

    总之，实现 Bootstrap Table 的列宽设置和拖动功能，需要结合使用 `data-width` 属性、Bootstrap Table 本身以及第三方的列宽拖动插件。通过这样的配置，我们可以为用户提供更加灵活和友好的数据查看体验。

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

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

    Bootstrap Table两个table间行数据拖拽

    总的来说，实现Bootstrap Table行数据的拖拽功能需要结合HTML、CSS、JavaScript和可能的服务器端交互。通过理解和利用jQuery UI的拖放功能，可以为Bootstrap Table增添动态数据管理的能力，提升用户的交互体验。

    【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx

    在模板部分，创建一个包含`el-table`的`div`元素，并为其绑定数据和一个自定义的`row-class-name`属性，以便我们可以为不可拖动的行设置特定的类： ```html &lt;div class="table"&gt; &lt;el-table ref="dragTable" :...

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

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

    bootstrap-table.css 表格拖拽排序

    这个JavaScript库提供了一种简单的方式来处理表格行的拖拽事件，当用户拖动表格行时，库会捕获这些事件并更新表格的DOM结构，以反映出行的新顺序。TableDnD库还提供了回调函数，可以在拖放操作开始、结束或过程中...

    bootstraptable-reorder-columns表格拖拽排序列

    要实现“bootstraptable-reorder-columns”功能，首先你需要在项目中引入BootstrapTable的基本库以及该插件的JavaScript和CSS文件。通常，这些文件可以从BootstrapTable的官方GitHub仓库或者CDN获取。确保正确地链接...

    Jquery 实现列的拖动 jquery grid

    本文将详细讲解如何利用jQuery实现网格（Grid）中的列拖动功能，以及如何展示和压缩内容，以达到类似Excel的效果。 首先，我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI，因此...

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

    拖动列宽的实现通常涉及到JavaScript和事件处理。当用户鼠标按下并移动到列边框时，我们可以监听`mousedown`、`mousemove`和`mouseup`事件。在`mousedown`事件中，记录当前被拖动的列以及鼠标初始位置；在`mousemove...

    HTML 实现行、列冻结功能

    本篇文章将详细介绍如何利用这两种技术在HTML表格中实现行和列的冻结。 首先，理解HTML表格的基础结构至关重要。HTML `&lt;table&gt;` 标签用于创建表格，而`&lt;tr&gt;` 表示行，`&lt;th&gt;` 用于定义表头，`&lt;td&gt;` 用于定义数据...

    table的td整列拖动交换以及重新排列位置

    在`mousedown`事件中，记录下被拖动单元格的原始位置，包括行索引（rowIndex）和列索引（cellIndex）。同时，获取单元格的大小和坐标，以便在后续的`mousemove`事件中进行计算。 3. **计算新位置**： 在`...

Magicbox
Global site tag (gtag.js) - Google Analytics