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><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><table width="500" border="1" align="center" cellpadding="0" cellspacing="0" id="showContent"> <tr> <td height="25">上移1</td> <td>下移</td> </tr> <tr> <td height="25">上移2</td> <td>下移</td> </tr> <tr> <td height="25">上移3</td> <td>下移</td> </tr> <tr> <td height="25">上移4</td> <td>下移</td> </tr> <tr> <td height="25">上移5</td> <td>下移</td> </tr> <tr> <td height="25">上移6</td> <td>下移</td> </tr> <tr> <td height="25">上移7</td> <td>下移</td> </tr> <tr> <td height="25">上移8</td> <td>下移</td> </tr> <tr> <td height="25">上移9</td> <td>下移</td> </tr> <tr> <td height="25">上移10</td> <td>下移</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需刷新才能执行]

首页 / 脚本样式 / JavaScript / js 操作table之 移动TR位置 兼容FF 跟 IE

首页 / 脚本样式 / JavaScript / js 操作table之移动TR位置兼容FF 跟 IE