<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>移动表格内容</title>
<script type="text/javascript">
var tid = "tid";
var did = "did";
var flag = false;
var xzhou=0;
var xc=0;
var yzhou=0;
var yc=0;
var tempcell;
var tempcell2;
var cf=false;
function init()
{
var tempdiv = document.createElement("div");
tempdiv.id = "did";
tempdiv.onselectstart = function(){return false};
tempdiv.style.background="yellow";
tempdiv.style.cursor = "move";
tempdiv.style.border = "1px solid black";
tempdiv.style.display = "none";
tempdiv.style.position = "absolute";
document.body.appendChild(tempdiv);
var hid=document.createElement("input");
hid.type="hidden";
hid.id="txt_BH";
document.all(did).appendChild(hid);
document.all(tid).onmousedown = showDiv;
}function pos(obj)
{
var a = new Array();
var temptop = obj.offsetTop;
var templeft = obj.offsetLeft;
var c = obj;
while(c = c.offsetParent)
{
temptop += c.offsetTop;
templeft += c.offsetLeft;
}
a[0] = temptop;
a[1] = templeft;
return a;
}function showDiv()
{
if(event.srcElement.tagName.toUpperCase() == "TH")
{
return;
}
document.all(did).style.display = "block";
var obj = event.srcElement;
tempcell = obj;
obj.style.background = "pink";
document.all(did).style.width = obj.offsetWidth;
document.all(did).style.height = obj.offsetHeight;
var temp = pos(obj);
yzhou = temp[0];
xc = event.clientX;
xzhou = temp[1];
yc = event.clientY;
document.all(did).style.top = temp[0];
document.all(did).style.left = temp[1];
document.all(did).innerText = obj.innerText;
// document.all(did).getElementById("txt_BH").value=obj.childNodes[0].value;
flag = true;
}function hideDiv()
{
flag = false;
if(cf)
{
var t = tempcell.innerText;
tempcell.innerText = tempcell2.innerText;
tempcell2.innerText = t;
//var s=tempcell.all(did).childNodes[0].value;
//tempcell.all(did).childNodes[0].value= tempcell2.all(did).childNodes[0].value;
// tempcell2.all(did).childNodes[0].value=s;
}
cf = false;
document.all(did).style.display = "none";
for(var i=1;i<document.all(tid).cells.length;i++)
{
document.all(tid).cells[i].style.background="white";
}
var arrData=new Array();
var objTable=document.getElementById("tid");
var sum=0;
if(objTable)
{
for(var i=0;i<objTable.rows.length;i++)
{
for(var j=0;j<objTable.rows[i].cells.length;j++)
{
var tj=objTable.rows[i].cells[j];
arrData[sum]=tj.childNodes[0].value;
sum++;
}
}
}
alert(arrData.join());
}
function dragDiv()
{
if(flag)
{
cf=false;
var x = event.clientX - xc + xzhou;
var y = event.clientY - yc + yzhou;
document.all(did).style.left = event.clientX - xc + xzhou;
document.all(did).style.top = event.clientY - yc + yzhou;
for(var i=1;i<document.all(tid).cells.length;i++)
{
var obj = document.all(tid).cells[i];
var temp = pos(obj);
if(obj != tempcell)
{
if(temp[1] < x && temp[0] < y && temp[1] +obj.offsetWidth > x && temp[0] +obj.offsetHeight > y)
{obj.style.background= "pink";tempcell2 = obj;cf=true;}
else
{obj.style.background= "white";}
}
} }
}
document.onmouseup = hideDiv;
document.onmousemove = dragDiv;
</script>
</head>
<body onload="init();">
<form id="form1" runat="server">
<div>
<table border="1" style="border: 1px solid black; cursor: default" id="tid" width="70%"
align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4" style="background-color: #CCCCCC; border-bottom: 2px solid black">
table</th>
</tr>
<tr>
<td id="td_0" width="100px" height="50px">
<input type="hidden" runat="server" value="1_1" id="txt_0" />
四海回族饭店</td>
<td id="td_1" width="100px" height="50px">
<input type="hidden" runat="server" value="1_2" id="txt_1" />
卓越饭店</td>
<td id="td_2" width="100px" height="50px">
<input type="hidden" runat="server" value="1_3" id="txt_2" />
红日旅馆</td>
</tr>
<tr>
<td id="td_3" width="100px" height="50px">
<input type="hidden" runat="server" value="2_1" id="txt_3" />
红太阳旅馆</td>
<td id="td_4" width="100px" height="50px">
<input type="hidden" runat="server" value="2_2" id="txt_4" />
孙氏蒸肉</td>
<td id="td_5" width="100px" height="50px">
<input type="hidden" runat="server" value="2_3" id="txt_5" />
金悦饭店</td>
</tr>
<tr>
<td id="td_6" width="100px" height="50px">
<input type="hidden" runat="server" value="3_1" id="txt_6" />
南湖宾馆</td>
<td id="td_7" width="100px" height="50px">
<input type="hidden" runat="server" value="3_2" id="txt_7" />
乐府大酒店</td>
<td id="td_8" width="100px" height="50px">
<input type="hidden" runat="server" value="3_3" id="txt_8" />
香格里拉大酒店</td>
</tr>
</table>
</div>
</form>
</body>
</html>
现在实现了TD中的文字移动功能，但是我还想实现不光TD的文字移动，连隐藏域中的Value也进行移动（也可也说是交换）。
还有哪位大哥，大姐。搭把手，帮忙给点注释。我的脚步功底是在太烂了。~~~~~~~~~~~~~先拜谢~~~~~~~~~~~·
这个tempcell.innerText = tempcell2.innerText;时
<td id="td_0" width="100px" height="50px">
<input type="hidden" runat="server" value="1_1" id="txt_0" />
四海回族饭店</td>
这里面的<input就没了,
可以试着
<td id="td_0" width="100px" height="50px">
<input type="hidden" runat="server" value="1_1" id="txt_0" />
<span id="t_0">四海回族饭店</span></td>在方法showDiv()里面
var obj = event.srcElement;
var na = obj.id.replace("td_","t_");之前是操作td_*的改成操作t_*的时候再去修改<input type="hidden" runat="server" value="1_1" id="txt_*" />等的value
var hiddens2;
hiddens2=tempcell2.innerHTML;
tempcell2.innerHTML = tempcell.innerHTML;
tempcell.innerHTML = hiddens2;
//加代码
建议修改一下代码
把
var t = tempcell.innerText;
tempcell.innerText = tempcell2.innerText;
tempcell2.innerText = t;
改成 var t = tempcell.innerHTML;
tempcell.innerHTML = tempcell2.innerHTML;
tempcell2.innerHTML = t;
即可
<head runat="server">
<title>移动表格内容</title>
<script type="text/javascript">
var tid = "tid";
var did = "did";
var flag = false;
var xzhou = 0;
var xc = 0;
var yzhou = 0;
var yc = 0;
var tempcell;
var tempcell2;
var cf = false;
function init(){
var tempdiv = document.createElement("div");
tempdiv.id = "did";
tempdiv.onselectstart = function(){
return false;
}
tempdiv.style.background = "yellow";
tempdiv.style.cursor = "move";
tempdiv.style.border = "1px solid black";
tempdiv.style.display = "none";
tempdiv.style.position = "absolute";
document.body.appendChild(tempdiv);
var hid = document.createElement("input");
hid.type = "hidden";
hid.id = "txt_BH";
document.getElementById(did).appendChild(hid);
document.getElementById(tid).onmousedown = function(e){showDiv(e);}
}
function pos(obj){
var a = new Array();
var temptop = obj.offsetTop;
var templeft = obj.offsetLeft;
var c = obj;
while(c = c.offsetParent){
temptop += c.offsetTop;
templeft += c.offsetLeft;
}
a[0] = temptop;
a[1] = templeft;
return a;
}
function showDiv(e){
e = window.event || e;
var obj = e.srcElement || e.target;
if(obj.tagName == null || obj.tagName.toUpperCase() == "TH"){
return;
}
document.getElementById(did).style.display = "block";
tempcell = obj;
obj.style.background = "pink";
document.getElementById(did).style.width = obj.offsetWidth;
document.getElementById(did).style.height = obj.offsetHeight;
var temp = pos(obj);
yzhou = temp[0];
xc = e.clientX || e.x;
xzhou = temp[1];
yc = e.clientY || e.y;
document.getElementById(did).style.top = temp[0];
document.getElementById(did).style.left = temp[1];
document.getElementById(did).innerHTML = obj.innerHTML;
flag = true;
}
function hideDiv(){try{
flag = false;
if(cf){
var t = tempcell.innerHTML;
tempcell.innerHTML = tempcell2.innerHTML;
tempcell2.innerHTML = t;
}
cf = false;
document.getElementById(did).style.display = "none";
var objTable = document.getElementById("tid");
for(var i = 1; i < objTable.rows.length; i ++ ){
for(var j = 0; j < objTable.rows[i].cells.length; j++){
objTable.rows[i].cells[j].style.background = "white";
}
}
var arrData = new Array();
var sum = 0;
if(objTable){
for(var i = 0; i < objTable.rows.length; i ++ ){
for(var j = 0; j < objTable.rows[i].cells.length; j ++ ){
var tj = objTable.rows[i].cells[j];
arrData[sum] = tj.childNodes[0].value;
sum ++ ;
}
}
}}catch(e){alert(e.message);}
}
function dragDiv(event){
event = window.event || event;
if(flag){
cf = false;
var x = (event.clientX || event.x) - xc + xzhou;
var y = (event.clientY || event.y) - yc + yzhou;
document.getElementById(did).style.left = x + "px";
document.getElementById(did).style.top = y + "px";
for(var i = 1; i < document.getElementById(tid).rows.length; i ++ ){
for(var j = 0; j < document.getElementById(tid).rows[i].cells.length; j++){
var obj = document.getElementById(tid).rows[i].cells[j];
var temp = pos(obj);
if(obj != tempcell){
if(temp[1] < x && temp[0] < y && temp[1] + obj.offsetWidth > x && temp[0] + obj.offsetHeight > y){
obj.style.background = "pink";
tempcell2 = obj;
cf = true;
}
else{
obj.style.background = "white";
}
}
}
}
}
}
document.onmouseup = hideDiv;
document.onmousemove = function(e){dragDiv(e);}
</script>
</head>
<body onload="init();">
<form id="form1" runat="server">
<div>
<table border="1" style="border: 1px solid black; cursor: default" id="tid" width="70%"
align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4" style="background-color: #CCCCCC; border-bottom: 2px solid black">
table</th>
</tr>
<tr>
<td id="td_0" width="100px" height="50px">
<input type="text" runat="server" value="1_1" id="txt_0" />
四海回族饭店</td>
<td id="td_1" width="100px" height="50px">
<input type="text" runat="server" value="1_2" id="txt_1" />
卓越饭店</td>
<td id="td_2" width="100px" height="50px">
<input type="text" runat="server" value="1_3" id="txt_2" />
红日旅馆</td>
</tr>
<tr>
<td id="td_3" width="100px" height="50px">
<input type="text" runat="server" value="2_1" id="txt_3" />
红太阳旅馆</td>
<td id="td_4" width="100px" height="50px">
<input type="text" runat="server" value="2_2" id="txt_4" />
孙氏蒸肉</td>
<td id="td_5" width="100px" height="50px">
<input type="text" runat="server" value="2_3" id="txt_5" />
金悦饭店</td>
</tr>
<tr>
<td id="td_6" width="100px" height="50px">
<input type="text" runat="server" value="3_1" id="txt_6" />
南湖宾馆</td>
<td id="td_7" width="100px" height="50px">
<input type="text" runat="server" value="3_2" id="txt_7" />
乐府大酒店</td>
<td id="td_8" width="100px" height="50px">
<input type="text" runat="server" value="3_3" id="txt_8" />
香格里拉大酒店</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>移动表格内容</title>
<script type="text/javascript">
var tid = "tid";
var did = "did";
var flag = false;
var xzhou = 0;
var xc = 0;
var yzhou = 0;
var yc = 0;
var tempcell;
var tempcell2;
var cf = false;
function init(){
var tempdiv = document.createElement("div");// 创建 DIV
tempdiv.id = "did";
tempdiv.onselectstart = function(){
return false;// 不允许选择（文本或控件）
}
// 设置 DIV 样式
tempdiv.style.background = "yellow";
tempdiv.style.cursor = "move";
tempdiv.style.border = "1px solid black";
tempdiv.style.display = "none";
tempdiv.style.position = "absolute";
document.body.appendChild(tempdiv);// 将创建的 DIV ，添加到 body 中
var hid = document.createElement("input");
hid.type = "hidden";
hid.id = "txt_BH";
document.getElementById(did).appendChild(hid);
document.getElementById(tid).onmousedown = function(e){showDiv(e);}// 定义鼠标按下事件
}// 得到某控件绝对位置
function pos(obj){
var a = new Array();
var temptop = obj.offsetTop;// 纵坐标
var templeft = obj.offsetLeft;// 横坐标
var c = obj;
// 得到绝对位置（考虑父容器位置）
while(c = c.offsetParent){
temptop += c.offsetTop;
templeft += c.offsetLeft;
}
a[0] = temptop;
a[1] = templeft;
return a;
}
function showDiv(e){
e = window.event || e;// 得到事件，兼容 IE 和 FF
var obj = e.srcElement || e.target;// 得到触发事件的控件，兼容 IE 和 FF
if(obj.tagName == null || obj.tagName.toUpperCase() == "TH"){
return;// 不是 th 就返回
}
document.getElementById(did).style.display = "block";// 显示提示层（正在被移动的 TD）
tempcell = obj;
obj.style.background = "pink";
document.getElementById(did).style.width = obj.offsetWidth;// 设置提示层和TD大小一致
document.getElementById(did).style.height = obj.offsetHeight;
var temp = pos(obj);
yzhou = temp[0];
xc = e.clientX || e.x;// 鼠标位置（去 google 一下，clientX、offsetX、x 等等）
xzhou = temp[1];
yc = e.clientY || e.y;
document.getElementById(did).style.top = temp[0];// 提示层移动到目标 TD 的位置
document.getElementById(did).style.left = temp[1];
document.getElementById(did).innerHTML = obj.innerHTML;
flag = true;// 按下了鼠标（正在移动）
}
function hideDiv(){try{
flag = false;
// 如果得到了可交换的 TD，则将两个 TD 的 innerHTML 交换
if(cf){
var t = tempcell.innerHTML;
tempcell.innerHTML = tempcell2.innerHTML;
tempcell2.innerHTML = t;
}
cf = false;
document.getElementById(did).style.display = "none";
// 设置所有 TD 的背景色
var objTable = document.getElementById("tid");
for(var i = 1; i < objTable.rows.length; i ++ ){
for(var j = 0; j < objTable.rows[i].cells.length; j++){
objTable.rows[i].cells[j].style.background = "white";
}
} // 保存所有 input 中的值（和移动 TD 无关）
var arrData = new Array();
var sum = 0;
if(objTable){
for(var i = 0; i < objTable.rows.length; i ++ ){
for(var j = 0; j < objTable.rows[i].cells.length; j ++ ){
var tj = objTable.rows[i].cells[j];
arrData[sum] = tj.childNodes[0].value;
sum ++ ;
}
}
}}catch(e){alert(e.message);}
}
function dragDiv(event){
event = window.event || event;
if(flag){
cf = false;
var x = (event.clientX || event.x) - xc + xzhou;
var y = (event.clientY || event.y) - yc + yzhou;
document.getElementById(did).style.left = x + "px";
document.getElementById(did).style.top = y + "px";
for(var i = 1; i < document.getElementById(tid).rows.length; i ++ ){
for(var j = 0; j < document.getElementById(tid).rows[i].cells.length; j++){
var obj = document.getElementById(tid).rows[i].cells[j];
// 将每个 TD 的坐标和当前鼠标位置比对，如果位置符合，则记录第二个 TD
var temp = pos(obj);
if(obj != tempcell){
if(temp[1] < x && temp[0] < y && temp[1] + obj.offsetWidth > x && temp[0] + obj.offsetHeight > y){
obj.style.background = "pink";
tempcell2 = obj;
cf = true;
}
else{
obj.style.background = "white";
}
}
}
}
}
}
document.onmouseup = hideDiv;// 鼠标弹起时
document.onmousemove = function(e){dragDiv(e);}// 鼠标移动时
</script>