- 浏览: 322123 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
lst923:
...
java 实现图片裁剪 -
kakarottoz:
多谢博主分享,正好用到!
java 实现图片裁剪 -
Vcb:
http://osgi.jxtech.net 是一个完全基于O ...
OSGi介绍 -
Vcb:
是一个完全基于OSGi的开发平台,有在线演示,免费插件可供下 ...
OSGi介绍 -
mikey_5:
谢谢分享,原来设置: style="word-bre ...
td内容自动换行
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>JS动态拖动表格实现列内容的交换</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
* created by yzh 2002.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在,id为指定
* 请大家引用时保留这段作者声明,此代码为开源代码;使用不受限制,欢迎大家采用本人所写JS动态拖动表格实现代码。
*/
/*--------全局变量-----------*/
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";
/*--------全局变量-----------*/
function DragedTable(tableId)
{
dragedTable_tableId = tableId;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedTable_movedDiv;
oTempDiv.onselectstart = function(){return false};
oTempDiv.style.cursor = "hand";
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedTable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.all(tableId).onmousedown = showDiv;
}
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
//显示图层
function showDiv()
{
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.all(dragedTable_movedDiv);
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置,赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
//记住原td
dragedTable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedTable_preColor;
dragedTable_preCell = obj;
dragedTable_movable = true;
}
}
function dragDiv()
{
if(dragedTable_movable)
{
var oDiv = document.all(dragedTable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_endColor;
}
else
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
}
}
}
}
function hideDiv()
{
if(dragedTable_movable)
{
var oTable = document.all(dragedTable_tableId);
var pos = new Array();
if(dragedTable_preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置,是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
//交换文本
dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
//清除原单元格和目标单元格的样式
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
dragedTable_preCell.style.cursor = "";
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
}
}
}
}
dragedTable_movable = false;
//清除提示图层
document.all(dragedTable_movedDiv).style.display = "none";
}
}
document.onmouseup = function()
{
hideDiv();
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
document.onmousemove = function()
{
dragDiv();
}
/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new DragedTable("tableId");
}
</script>
</HEAD>
<BODY oncontextmenu="return false;" onload="init()">
<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
<TR>
<TH colspan="4" style="">拖动交换单元格内容</TH>
</TR>
<TR>
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR>
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
</TABLE>
</BODY>
</HTML>
转自http://xiaoyaolong.iteye.com/blog/1577919
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>JS动态拖动表格实现列内容的交换</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
* created by yzh 2002.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在,id为指定
* 请大家引用时保留这段作者声明,此代码为开源代码;使用不受限制,欢迎大家采用本人所写JS动态拖动表格实现代码。
*/
/*--------全局变量-----------*/
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";
/*--------全局变量-----------*/
function DragedTable(tableId)
{
dragedTable_tableId = tableId;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedTable_movedDiv;
oTempDiv.onselectstart = function(){return false};
oTempDiv.style.cursor = "hand";
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedTable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.all(tableId).onmousedown = showDiv;
}
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
//显示图层
function showDiv()
{
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.all(dragedTable_movedDiv);
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置,赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
//记住原td
dragedTable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedTable_preColor;
dragedTable_preCell = obj;
dragedTable_movable = true;
}
}
function dragDiv()
{
if(dragedTable_movable)
{
var oDiv = document.all(dragedTable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_endColor;
}
else
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
}
}
}
}
function hideDiv()
{
if(dragedTable_movable)
{
var oTable = document.all(dragedTable_tableId);
var pos = new Array();
if(dragedTable_preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置,是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
//交换文本
dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
//清除原单元格和目标单元格的样式
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
dragedTable_preCell.style.cursor = "";
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
}
}
}
}
dragedTable_movable = false;
//清除提示图层
document.all(dragedTable_movedDiv).style.display = "none";
}
}
document.onmouseup = function()
{
hideDiv();
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
document.onmousemove = function()
{
dragDiv();
}
/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new DragedTable("tableId");
}
</script>
</HEAD>
<BODY oncontextmenu="return false;" onload="init()">
<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
<TR>
<TH colspan="4" style="">拖动交换单元格内容</TH>
</TR>
<TR>
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR>
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
</TABLE>
</BODY>
</HTML>
转自http://xiaoyaolong.iteye.com/blog/1577919
发表评论
-
dom事件与setTimeout
2013-03-15 15:11 1461<html> <head> ... -
js数组操作
2013-03-12 14:06 1119原文: http://www.blogjava.net/zks ... -
iframe 框架自适应高度
2012-11-07 17:33 12611. 经典代码 iFrame 自适应高度,在IE6/IE7/I ... -
web前端学习资源
2012-10-19 09:11 1041CSS彻底研究视频教程(全23讲) 本套视频教程配合《CSS ... -
JS字符串函数
2012-09-11 14:31 840http://www.cnblogs.com/qfb620/a ... -
javascript 20种小技巧
2012-08-16 16:59 983原文地址: http://www.iiwn ... -
struts 文件下载
2012-07-19 11:17 918以下代码是struts1中的action中 一般下载有三种方式 ... -
JS checkbox 选择
2012-07-17 17:35 1203这是个选择项计数,做参考 var num = 0; ... -
JS汉字得到拼音
2012-07-16 09:04 5717这是转自oschina的,转载地址可惜没找到了 <ht ... -
js按钮打开新窗口
2012-07-06 10:17 2649在按钮事件处理方法中,要是通过location.href=ur ... -
js 确认提示
2012-07-03 17:37 933if(confirm("确定要删除数据吗?\n[确定 ... -
两个select的数据项选择
2012-07-03 16:54 1123两个选择框,双击一下边的数据项,数据项传入另一选择框 &l ... -
像word 的web编辑器
2012-07-02 15:59 993http://www.ewebeditor.net/ -
hibernate延迟加载
2012-06-21 11:47 999hibernate延迟加载问题是开发者使用hibernate时 ... -
tomcat + apache配置
2012-06-21 11:48 1147Apache的HTTPD是目前比较 ... -
apache中文文档在线http://www.itlearner.com/code/apache2.2/
2012-06-20 09:24 1031http://www.itlearner.com/code/a ... -
Dwr 记要
2012-06-20 08:35 1208一直没用过dwr了,现在 ... -
meta标签大全
2012-05-18 17:41 1109HTML/XHTML/DHTML并不简单,我想就单说一个met ... -
<base>标签
2012-05-18 16:15 846target=showname 就是这个链接是提交给框架(fr ... -
js URL格式正则
2012-07-02 15:58 1064function CheckUrl(str) { va ...
相关推荐
项目开发中需要用到一个拖动交换表格的功能,上网搜到雅虎的一...就自己综合网上资源写了一个可兼容IE,firefox,Chrome,Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。
在JavaScript编程中,拖动表格行和列...总的来说,实现JavaScript拖动表格行和列的功能需要理解DOM操作、事件处理、CSS定位以及可能的第三方库的运用。通过实践和调试,你可以创造出更加动态和交互丰富的Web表格应用。
此外,描述中提到的“拖动表格列大小”功能,可能涉及到`<th>`元素(表头单元格)的拖动调整宽度。这通常通过监听`mousedown`、`mousemove`和`mouseup`事件,结合`resizer`元素(用于拖动的把手)和CSS样式实现。...
交换行序号(通过修改第一列的内容实现),然后交换两行的`innerHTML`,这将更新整个行的内容。最后,清空`downRow`,结束此次操作。 为了使行交换功能更加完善,可以考虑添加一些额外的功能,比如处理边界条件(如...
JS(JavaScript)作为一种强大的客户端脚本语言,被广泛用于实现各种动态效果和用户交互,其中包括可拖动和排序的表格功能。这种功能允许用户通过鼠标拖放操作来改变表格中行或列的顺序,提升数据管理的便捷性。下面...
- 在实现可拖动行列的表格时,首先需要一个合适的数据结构来存储表格中的信息。通常,这会是一个二维数组或类似的结构,其中每一行和列对应数组的一个元素。 - 表格的行列信息需要包含数据、位置(行号和列号)...
本文将详细讲解如何实现“table的td整列拖动交换以及重新排列位置”的JavaScript技术,帮助你为用户提供更加直观、便捷的操作体验。 首先,我们需要了解HTML中的`<table>`元素,它由`<tr>`(行)和`<td>`(单元格)...
在"easyui-表格拖动的实现"这个主题中,我们将深入探讨如何利用 EasyUI 的功能实现表格数据的拖放操作(Drag and Drop,简称DND)。 1. **EasyUI 的 Drag and Drop 功能**: EasyUI 支持 DND,允许用户通过鼠标...
JavaScript 实现拖动表格行的功能是一项常见的交互设计,可以提高用户在操作数据时的便捷性。以下是一个关于如何实现这一功能的详细解释: 首先,我们要理解实现拖动表格行的基本思路。当用户按下鼠标并开始拖动时...
用户可以通过手动拖动列边框来改变宽度,或者采用自动调整列宽的机制,让表格更适应屏幕尺寸或数据内容。 最后,**行交换**功能则允许用户交换表格内的行,这对于数据对比或整理非常有用。例如,在一个待办事项列表...
这个功能允许用户通过鼠标长按并拖动表格的列头来调整列的顺序,以满足个性化查看数据的需求。这种效果通常应用于数据管理、数据分析或者任何需要展示多列信息的网页应用中。 在“js表格列拖动排序代码”中,主要...
为了实现列的位置交换,我们需要记录拖动的列信息,并在释放时更新表格的结构,同时更新后台数据的对应关系,确保数据的正确性。 在实现这些功能时,需要注意兼容性和性能优化。例如,使用事件委托来减少事件处理器...
DragDrop组件允许用户将元素从一个位置拖动到另一个位置,而DragDropGroup则使得多个DragDrop对象能够相互交互,例如在不同的表格之间进行数据交换。 首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的...
6. **同步数据源**:如果表格的数据是动态绑定的,比如从服务器获取,那么改变栏位顺序后,数据源也需要相应更新,以保持与视图的一致性。 7. **结束拖动**:最后,在mouseup事件中,清除拖动状态,移除视觉效果,...
"实现table表格可按行拖拽,按列排序,并可以保存排序后的结果"是一个常见的需求,尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
在本主题中,我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能,适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计,允许用户通过鼠标拖动来改变元素的顺序。这种功能在...
本文将深入探讨如何实现一个可改变列宽度、交换列位置以及排序功能的表格。这些特性能够极大地提升用户在浏览和操作数据时的便捷性和舒适度。 首先,我们要关注的是**可改变列宽度**的功能。在网页上,这通常通过...
综上所述,实现js行拖动、div拖动和图片拖动的关键在于理解鼠标事件和元素定位。使用Sortable这样的库可以简化开发,提供更多的功能和定制选项。在实际应用中,应根据项目需求选择合适的实现方式,确保拖放操作的...
本文将详细讲解如何实现JS拖拽Table表格列排序的功能,并结合提供的"js拖拽Table表格列排序.rar"文件进行解析。 首先,我们需要理解HTML中的Table结构。一个基本的HTML Table由`<table>`标签开始,内部包含`<tr>`...
通过上述知识点,我们了解到实现JavaScript拖动表格行需要对DOM操作有一定的了解,包括事件处理、节点操作和兼容性处理等。通过合理利用原生JavaScript API,可以实现一个高效且用户友好的拖动交互体验。在实际开发...