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

js操作table，实现拖拽，保存顺序思路

HTML 
阅读更多 
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>拖动</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 chengRenYin 2004.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在，id为指定
*/
/*--------全局变量-----------*/
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");
}
function save()
{
	var table = document.getElementById('tableId');
	var rows = table.rows;
	
	for(var i=0;i<rows.length;i++)
	{
		var cells = table.rows[i].cells;
		for(var j=0;j<cells.length;j++)
		{
			alert(cells[j].innerHTML)
		}
	}
}
</script>
	</HEAD>
	<BODY oncontextmenu="return false;" onload="init()">
		<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
			<%
				for(int i=1;i<=10;i++)
				{
			%>
				<% if(i%4==0){ %>
					<td><%=Math.round(i*Math.random()) %></td>
				<% }else{ %>
					<td><%=Math.round(i*Math.random()) %></td>
				<%} %>
				<% if(i%4==0){ %></tr><%} %>
			<%} %>
		</TABLE>
		
		<TABLE id="tableIdTEST" width="70%" align="center" cellpadding="0" cellspacing="0">
			<tr>
				<TH colspan="4" style="">
					<input type="button" id="sub" name="subName" value="save" onclick="save()"/>
				</TH>
			</tr>
		</TABLE>
	</BODY>
</HTML>
分享到：
| "]#{..} is not allowed in template text
评论
发表评论

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

相关推荐

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

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

    vue Element ui实现table列拖动效果

    Vue.js 是一款非常流行的前端框架，它以其轻量级、高效和易用性著称。Element UI 是基于 Vue 的一套组件库，提供了丰富的界面元素，包括表格（Table）等，帮助开发者快速构建用户界面。在实际开发中，我们常常会遇到...

    js 实现 拖动表格行改变顺序

    js 实现 拖动表格行改变顺序! 值得下载看看!资源免费,大家分享!!

    bootstrap-table.css 表格拖拽排序

    在本主题中，我们关注的是"bootstrap-table.css 表格拖拽排序"，这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景，比如任务管理或者项目进度跟踪。 ...

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

    3. 在调整列顺序后，如果你需要保存用户的偏好设置，可以监听BootstrapTable的`onColumnReordered`事件，将新的列顺序保存到本地存储或服务器。 在实际应用中，还可以结合其他BootstrapTable插件，如搜索、筛选、...

    table拖拽js

    而“table拖拽js”则是在这个基础上进一步增强交互体验的一种技术，允许用户通过鼠标拖放来调整表格行的顺序，这种功能在需要动态排序数据的场景中非常实用。在本篇中，我们将详细探讨BootstrapTable中的拖拽行...

    elementui table列的拖拽功能

    ElementUI 是一个基于 Vue.js 的开源 UI 组件库，提供了丰富的界面组件，其中包括表格（Table）组件。在实际开发中，我们经常需要实现表格列的拖拽功能，以方便用户根据需求自定义列的顺序。这个压缩包文件提供的...

    js拖拽排序并保存到数据库

    在JavaScript（JS）中实现拖拽排序功能，可以极大地提升用户交互体验，尤其是在管理列表、项或元素时。拖拽排序允许用户通过直观地拖动元素来改变它们的顺序，这种功能在各种Web应用中非常常见，比如任务管理器、...

    可拖动、排序的表格非常灵活,样式也很好看

    `DragTable.js` 文件则是实现表格拖动功能的组件。在JavaScript中，我们可以利用`mousedown`、`mousemove`和`mouseup`事件来实现拖放操作。当用户按下鼠标并在表格行上移动时，脚本会捕捉这些事件并更新行的位置。...

    table表格内容上下移动的三种实现方法

    在网页设计中，HTML表格（Table）是一种常用的数据展示方式，有时我们需要实现表格内容的上下移动功能，以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一：...

    拖动表头改变栏位顺序

    在实现这一功能时，通常会用到JavaScript库，例如jQuery，因为其提供了丰富的DOM操作API，可以方便地处理元素的增删改查。"jQuerytabletd"可能是指使用jQuery来操作表格（table）中的行（tr）和单元格（td）。以下是...

    js原生实现表格行的拖动排序

    在JavaScript原生开发中，实现表格（Table）行的拖动排序是一项常见的需求，尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序，提升用户体验。以下是一个详细的知识点说明...

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    在本文中，我们将探讨如何实现JS组件Bootstrap Table的表格多行拖拽效果。这是一个常见的需求，特别是在需要用户交互和自定义排序的Web应用中。Bootstrap Table是一个强大的表格插件，它提供了许多内置功能，包括...

    Element-UI Table组件上添加列拖拽效果实现方法

    Element-UI Table 组件上添加列拖拽效果实现方法 在 Element-UI 中，Table 组件是一个功能强大的数据表格控件，但是在实际应用中，我们可能需要添加一些自定义的功能，例如添加列拖拽效果。下面我们将详细介绍如何...

    BootStrap table实现表格行拖拽效果

    在本案例中，我们将重点讨论如何实现表格行的拖拽功能，这一特性允许用户通过直观的拖放操作来改变表格行的顺序。 首先，为了实现拖拽效果，我们需要引入额外的 JavaScript 和 CSS 文件。这些文件分别是 `jquery....

    图片拖动排序js（table）

    "图片拖动排序js（table）"是一个针对HTML表格的交互功能实现，允许用户通过拖放操作改变表格列的顺序，甚至对数据进行排序。这个功能使得网页的界面更加直观、易用，尤其适用于需要用户自定义显示顺序或者对数据...

    移动端列表长按上下拖动排序

    在实际开发中，我们可以使用JavaScript库，如Hammer.js，来简化触摸事件的处理，同时结合CSS3的transform属性来实现平滑的动画效果。此外，为了优化性能，可能需要使用虚拟列表（Virtual Scrolling）技术，只渲染...

    基于Angular的拖拽排序实现

    在Angular框架中实现拖拽排序是一项常见的需求，它允许用户通过直观的拖放操作来调整元素的顺序。本文将深入探讨如何在Angular应用中实现这一功能，并基于提供的"dragSort-Angular-master"项目进行详细讲解。 首先...

    bootstrap-table 表内行拖放所需js/css及实例

    在本篇文章中，我们将深入探讨如何实现Bootstrap Table的行拖放功能，以及涉及到的相关JavaScript（js）和CSS（css）文件，同时会提供一个基本实例，并讨论如何将拖放排序的结果保存到数据库。 首先，为了实现...

    实现表格按照列排序和拖拽行排序

    它允许用户通过鼠标拖动来改变表格行的顺序，增强了表格的可操作性。这个插件的工作原理是监听鼠标的移动事件，当检测到拖动行为时，动态更新DOM结构，将行移动到新的位置。同时，它还考虑了选中状态、鼠标光标样式...

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