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

更新时间：2009年11月07日 00:13:49 作者：

js操作table之移动TR位置兼容FF 跟 IE,需要的朋友可以参考下。

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Js动态添加复选框Checkbox的实例方法
Js动态添加复选框Checkbox的实例方法，需要的朋友可以参考一下
2013-04-04
javascript刷新父页面方法汇总详解
这篇文章主要介绍了javascript刷新父页面方法汇总详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
微信小程序删除处理详解
这篇文章主要为大家详细介绍了微信小程序删除处理的相关代码，用小程序里的模态框实现删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
window.open不被拦截的简单实现代码(推荐)
下面小编就为大家带来一篇window.open不被拦截的简单实现代码(推荐) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
基于JS编写开心消消乐游戏的示例代码
这篇文章主要为大家介绍了如何利用JavaScript实现开心消消乐小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
JS实现定时自动消失的弹出窗口
这篇文章介绍了JS实现定时自动消失的弹出窗口，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
浅谈Javascript事件模拟
事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的
2012-06-06
javaScript日期工具类DateUtils详解
这篇文章主要为大家详细介绍了javaScript日期工具类DateUtils，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
js仿微信抢红包功能
这篇文章主要为大家详细介绍了js仿微信抢红包功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
详解cocoscreater预制体prefab
这篇文章主要介绍了详解cocoscreater预制体prefab的作用和使用方法，对此感兴趣的同学，可以回去试一试
2021-04-04