一个对表格进行拖拽来交换单元格数据的脚本-.NET教程,数据库应用-IDC资讯中心

对表格进行拖拽来交换单元格的数据,呵呵,拷贝下来试试看吧　:　）

<!– 欢迎转载,请保留作者及其出处,谢谢 –>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=gb2312">

<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 lxcjie 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;

}

}

}

}

}

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>

<tr>

<td>photoshop</td>

<td>java</td>

<td>illustrator</td>

<td>pagemaker</td>

</tr>

<tr>

<td>cartoon</td>

<td>telephone</td>

<td>china</td>

<td>usa</td>

</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>

<tr>

<td>photoshop</td>

<td>flash</td>

<td>illustrator</td>

<td>pagemaker</td>

</tr>

<tr>

<td>cartoon</td>

<td>telephone</td>

<td>china</td>

<td>usa</td>

</tr>

</table>

</body>

</html>

一个对表格进行拖拽来交换单元格数据的脚本-.NET教程,数据库应用

相关推荐

热门标签

热门文章

分类目录