<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>js operation table Mobile TR location compatible FF with IE </title> <script language=" JavaScript "> var m Ousepos; function Up_move (obj) {try{if (document.all) {document.getElementById (' show_input '). Style.top = Mousepos.y DOCUMENT.G Etelementbyid (' 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 ("Please enter the number of digits to move"); 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 ("This record is already the first "); 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 doc Ument.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 ("This record is the last"); 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 ("Please enter the number of digits to move"); 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> </pead> <body> <div id= "Show_input" > <ul> <li> Please enter the number of digits you want to move </li> <li& Gt <input name= "Move_no" type= "text" id= "Move_no"/> </li> <li> <input name= "Shuzhitijiao" id= "Shuzhi" Tijiao "type=" button "value=" OK "/> <input name=" Shuzhiquxiao "id=" Shuzhiquxiao "type=" button "value=" Cancel "/> &l t;/li> </ul> </div> <table width= "$" border= "1" align= "center" cellpadding= "0" cellspacing= "0" id= " Showcontent "> <tr> <td height=" "> Up-shift 1</td> <td> down-shift </td> </tr> <tr> < TD height= "> Move 2</td> <td> move </td> </tr> <tr> <td height=" "> Up 3</td> <td> down </td> </tr> <tr> <td height= ">" Up Move 4</td> <td> down </td> </tr& Gt <tr> <td height= > Up 5</td> <td> down </td> </tr> <tr> <td height= "a" > Move Up 6</td> <td> down </td> </tr> <tr> <td height= ">" Up Move 7</td> <td> down </td> </tr& Gt <tr> <td height= > Up 8</td> <td> down </td> </tr> <tr> <td height= "a" > Move up 9</td> <td> down </td> </tr> <tr> <td height= "" > Move 10</td> <td> Move Down < /TD> </tr> </table> <script type= "Text/javascript" > Function mouseposition (EV) {if (Ev.pagex | | e V.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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
