js操作table之 移动TR位置 兼容FF 跟 IE
2009-11-06 15:24
816 查看
<!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>无标题文档</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 id="show_input">
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</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 id="show_input">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 操作table之 移动TR位置 兼容FF 跟 IE
- js 操作table之 移动TR位置 兼容FF 跟 IE
- js操作iframe的div移动 | 兼容FF+IE
- js实现兼容IE和FF的上下层的移动
- js实现兼容IE和FF的上下层的移动
- js导出table到excel，同时兼容FF和IE
- js导出table到excel同时兼容FF和IE示例
- js获取textarea光标位置方法（兼容ie，ff)
- JS网页图片查看器－可控制图片放大缩小移动｜兼容IE、FF
- js导出table到excel，同时兼容FF和IE
- JS网页图片查看器－可控制图片放大缩小移动｜兼容IE、FF
- javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创
- JS对select动态添加options操作【IE&FF兼容】
- JS操作html时childNodes的替代方法[兼容IE与FF]
- js 操作TABLE添加行 (IE都兼容)
- JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
- JS操作XML，兼容IE,FF
- javascript操作table增加，批量删除，模糊查询，文本框修改（兼容IE，FF)
- javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创