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

最新推荐文章于 2020-08-03 18:06:35 发布

maomaoyu2099163

最新推荐文章于 2020-08-03 18:06:35 发布

阅读量335

点赞数

分类专栏： JavaScript 文章标签： HTML

本文链接：https://blog.csdn.net/maomaoyu2099163/article/details/83724566

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<%@ 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>

maomaoyu2099163

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作table，实现拖拽，保存顺序思路

[code="java"] 拖动 td { width: 20%; height: 20px; border-bottom: 1px solid black; border-right: 1px solid black; cursor: default;}div { font-size: 13px;}th { h...
复制链接

扫一扫

专栏目录