js 操作table之移动TR位置兼容FF 跟 IE

时间:2020-05-12 人气:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js操作table之 移动TR位置 兼容FF 跟 IE </title> 
<script language="javascript"> 
var mousePos; 
function Up_Move(obj){ 
try{ 
if(document.all){ 
document.getElementById('show_input').style.top = mousePos.y 
document.getElementById('show_input').style.left = mousePos.x 
}else{ 
document.getElementById('show_input').style.top = mousePos.y+"px"; 
document.getElementById('show_input').style.left = mousePos.x+"px"; 
} 
}catch(e){} 
show_input_div(); 
document.getElementById("shuzhitijiao").onclick=function(){ 
var move_no=document.getElementById("move_no").value; 
move_no=parseInt(move_no); 
if(move_no==""||isNaN(move_no)){ 
alert("请输入要移动的位数"); 
document.getElementById("move_no").focus(); 
return; 
} 
hidden_input_div(); 
var table_obj,tr_obj,tr_move_obj; 
tr_obj=obj.parentNode.parentNode; 
table_obj=tr_obj.parentNode; 
for(var i=0;i<table_obj.childNodes.length;i++){ 
if(tr_obj == table_obj.childNodes[i]){ 
if(i==0){ 
alert("此记录已经是第一位"); 
return; 
} 
if(navigator.userAgent.indexOf('MSIE')>0){ 
if(i<move_no){ 
tr_move_obj=table_obj.childNodes[0]; 
}else{ 
tr_move_obj=table_obj.childNodes[i-move_no]; 
} 
}else{ 
move_no=move_no*2; 
if(i<move_no){ 
tr_move_obj=table_obj.childNodes[0]; 
}else{ 
tr_move_obj=table_obj.childNodes[i-move_no]; 
} 
} 
document.getElementById("move_no").value=""; 
break; 
} 
} 
table_obj.removeChild(tr_obj); 
table_obj.insertBefore(tr_obj,tr_move_obj); 
document.getElementById("move_no").value=""; 
} 
document.getElementById("shuzhiquxiao").onclick=function(){ 
hidden_input_div(); 
} 
} 
function Down_Move(obj){ 
try{ 
if(document.all){ 
document.getElementById('show_input').style.top = mousePos.y 
document.getElementById('show_input').style.left = mousePos.x 
}else{ 
document.getElementById('show_input').style.top = mousePos.y+"px"; 
document.getElementById('show_input').style.left = mousePos.x+"px"; 
} 
}catch(e){} 
show_input_div(); 
document.getElementById("shuzhitijiao").onclick=function(){ 
var move_no=document.getElementById("move_no").value; 
move_no=parseInt(move_no); 
if(move_no!=""&&!isNaN(move_no)){ 
hidden_input_div(); 
var table_obj,tr_obj,tr_move_obj; 
tr_obj=obj.parentNode.parentNode; 
table_obj=tr_obj.parentNode; 
for(var i=0;i<table_obj.childNodes.length;i++){ 
if(tr_obj == table_obj.childNodes[i]){ 
if(i==table_obj.childNodes.length-1){ 
alert("此记录已经是最后一位"); 
return; 
} 
if(navigator.userAgent.indexOf('MSIE')>0){ 
if(table_obj.childNodes.length-i-2<move_no){ 
table_obj.removeChild(tr_obj); 
table_obj.appendChild(tr_obj); 
}else{ 
tr_move_obj=table_obj.childNodes[i+move_no+1]; 
table_obj.removeChild(tr_obj); 
table_obj.insertBefore(tr_obj,tr_move_obj); 
} 
}else{ 
move_no=move_no*2; 
if(table_obj.childNodes.length-i-2<move_no){ 
table_obj.removeChild(tr_obj); 
table_obj.appendChild(tr_obj); 
}else{ 
tr_move_obj=table_obj.childNodes[i+move_no+2]; 
table_obj.removeChild(tr_obj); 
table_obj.insertBefore(tr_obj,tr_move_obj); 
} 
} 
document.getElementById("move_no").value=""; 
break; 
} 
} 
}else{ 
alert("请输入要移动的位数"); 
document.getElementById("move_no").focus(); 
} 
document.getElementById("move_no").value=""; 
} 
document.getElementById("shuzhiquxiao").onclick=function(){ 
hidden_input_div(); 
} 
} 
function show_input_div(){ 
document.getElementById("show_input").style.display="block"; 
} 
function hidden_input_div(){ 
document.getElementById("show_input").style.display="none"; 
} 
</script> 
<style type="text/css"> 
body { 
margin:0; 
padding:0; 
font-size:12px; 
} 
#show_input { 
background:#CCCCCC; 
position:absolute; 
width:200px; 
height:100px; 
/* top:100px; 
left:500px;*/ 
display:none; 
padding:10px; 
} 
ul, li { 
margin:0; 
padding:0; 
list-style:none; 
} 
</style> 
</head> 
<body> 
<div> 
<ul> 
<li>请输入所要移动的位数</li> 
<li> 
<input name="move_no" type="text" id="move_no" /> 
</li> 
<li> 
<input name="shuzhitijiao" id="shuzhitijiao" type="button" value="确定" /> 
<input name="shuzhiquxiao" id="shuzhiquxiao" type="button" value="取消" /> 
</li> 
</ul> 
</div> 
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" id="showContent"> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移1</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移2</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移3</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移4</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移5</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移6</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移7</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移8</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移9</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
<tr> 
<td height="25"><a href="javascript:void(0);" onclick="Up_Move(this);">上移10</a></td> 
<td><a href="javascript:void(0);" onclick="Down_Move(this);">下移</a></td> 
</tr> 
</table> 
<script type="text/javascript"> 
function mouseposition(ev){ 
if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY};} 
return {x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,y:ev.clientY+document.body.scrollTop-document.body.clientTop} 
} 
var showContent = document.getElementById('showContent').getElementsByTagName('a') 
for(i=0;i<showContent.length;i++){ 
showContent[i].onmouseover = function(ev){ 
ev=ev||window.event; 
mousePos=mouseposition(ev); 
} 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容

js 操作table之 移动TR位置 兼容FF 跟 IE

js 操作table之移动TR位置兼容FF 跟 IE