资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0Avar%20mousePos%3B%20%0D%0Afunction%20Up_Move(obj)%7B%20%0D%0Atry%7B%20%0D%0Aif(document.all)%7B%20%0D%0Adocument.getElementById('show_input').style.top%20%3D%20mousePos.y%20%0D%0Adocument.getElementById('show_input').style.left%20%3D%20mousePos.x%20%0D%0A%7Delse%7B%20%0D%0Adocument.getElementById('show_input').style.top%20%3D%20mousePos.y%2B%22px%22%3B%20%0D%0Adocument.getElementById('show_input').style.left%20%3D%20mousePos.x%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%7Dcatch(e)%7B%7D%20%0D%0Ashow_input_div()%3B%20%0D%0Adocument.getElementById(%22shuzhitijiao%22).onclick%3Dfunction()%7B%20%0D%0Avar%20move_no%3Ddocument.getElementById(%22move_no%22).value%3B%20%0D%0Amove_no%3DparseInt(move_no)%3B%20%0D%0Aif(move_no%3D%3D%22%22%7C%7CisNaN(move_no))%7B%20%0D%0Aalert(%22%E8%AF%B7%E8%BE%93%E5%85%A5%E8%A6%81%E7%A7%BB%E5%8A%A8%E7%9A%84%E4%BD%8D%E6%95%B0%22)%3B%20%0D%0Adocument.getElementById(%22move_no%22).focus()%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Ahidden_input_div()%3B%20%0D%0Avar%20table_obj%2Ctr_obj%2Ctr_move_obj%3B%20%0D%0Atr_obj%3Dobj.parentNode.parentNode%3B%20%0D%0Atable_obj%3Dtr_obj.parentNode%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ctable_obj.childNodes.length%3Bi%2B%2B)%7B%20%0D%0Aif(tr_obj%20%3D%3D%20table_obj.childNodes%5Bi%5D)%7B%20%0D%0Aif(i%3D%3D0)%7B%20%0D%0Aalert(%22%E6%AD%A4%E8%AE%B0%E5%BD%95%E5%B7%B2%E7%BB%8F%E6%98%AF%E7%AC%AC%E4%B8%80%E4%BD%8D%22)%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(navigator.userAgent.indexOf('MSIE')%3E0)%7B%20%0D%0Aif(i%3Cmove_no)%7B%20%0D%0Atr_move_obj%3Dtable_obj.childNodes%5B0%5D%3B%20%0D%0A%7Delse%7B%20%0D%0Atr_move_obj%3Dtable_obj.childNodes%5Bi-move_no%5D%3B%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Amove_no%3Dmove_no*2%3B%20%0D%0Aif(i%3Cmove_no)%7B%20%0D%0Atr_move_obj%3Dtable_obj.childNodes%5B0%5D%3B%20%0D%0A%7Delse%7B%20%0D%0Atr_move_obj%3Dtable_obj.childNodes%5Bi-move_no%5D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.getElementById(%22move_no%22).value%3D%22%22%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Atable_obj.removeChild(tr_obj)%3B%20%0D%0Atable_obj.insertBefore(tr_obj%2Ctr_move_obj)%3B%20%0D%0Adocument.getElementById(%22move_no%22).value%3D%22%22%3B%20%0D%0A%7D%20%0D%0Adocument.getElementById(%22shuzhiquxiao%22).onclick%3Dfunction()%7B%20%0D%0Ahidden_input_div()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20Down_Move(obj)%7B%20%0D%0Atry%7B%20%0D%0Aif(document.all)%7B%20%0D%0Adocument.getElementById('show_input').style.top%20%3D%20mousePos.y%20%0D%0Adocument.getElementById('show_input').style.left%20%3D%20mousePos.x%20%0D%0A%7Delse%7B%20%0D%0Adocument.getElementById('show_input').style.top%20%3D%20mousePos.y%2B%22px%22%3B%20%0D%0Adocument.getElementById('show_input').style.left%20%3D%20mousePos.x%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%7Dcatch(e)%7B%7D%20%0D%0Ashow_input_div()%3B%20%0D%0Adocument.getElementById(%22shuzhitijiao%22).onclick%3Dfunction()%7B%20%0D%0Avar%20move_no%3Ddocument.getElementById(%22move_no%22).value%3B%20%0D%0Amove_no%3DparseInt(move_no)%3B%20%0D%0Aif(move_no!%3D%22%22%26%26!isNaN(move_no))%7B%20%0D%0Ahidden_input_div()%3B%20%0D%0Avar%20table_obj%2Ctr_obj%2Ctr_move_obj%3B%20%0D%0Atr_obj%3Dobj.parentNode.parentNode%3B%20%0D%0Atable_obj%3Dtr_obj.parentNode%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ctable_obj.childNodes.length%3Bi%2B%2B)%7B%20%0D%0Aif(tr_obj%20%3D%3D%20table_obj.childNodes%5Bi%5D)%7B%20%0D%0Aif(i%3D%3Dtable_obj.childNodes.length-1)%7B%20%0D%0Aalert(%22%E6%AD%A4%E8%AE%B0%E5%BD%95%E5%B7%B2%E7%BB%8F%E6%98%AF%E6%9C%80%E5%90%8E%E4%B8%80%E4%BD%8D%22)%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(navigator.userAgent.indexOf('MSIE')%3E0)%7B%20%0D%0Aif(table_obj.childNodes.length-i-2%3Cmove_no)%7B%20%0D%0Atable_obj.removeChild(tr_obj)%3B%20%0D%0Atable_obj.appendChild(tr_obj)%3B%20%0D%0A%7Delse%7B%20%0D%0Atr_move_obj%3Dtable_obj.childNodes%5Bi%2Bmove_no%2B1%5D%3B%20%0D%0Atable_obj.removeChild(tr_obj)%3B%20%0D%0Atable_obj.insertBefore(tr_obj%2Ctr_move_obj)%3B%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Amove_no%3Dmove_no*2%3B%20%0D%0Aif(table_obj.childNodes.length-i-2%3Cmove_no)%7B%20%0D%0Atable_obj.removeChild(tr_obj)%3B%20%0D%0Atable_obj.appendChild(tr_obj)%3B%20%0D%0A%7Delse%7B%20%0D%0Atr_move_obj%3Dtable_obj.childNodes%5Bi%2Bmove_no%2B2%5D%3B%20%0D%0Atable_obj.removeChild(tr_obj)%3B%20%0D%0Atable_obj.insertBefore(tr_obj%2Ctr_move_obj)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.getElementById(%22move_no%22).value%3D%22%22%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Aalert(%22%E8%AF%B7%E8%BE%93%E5%85%A5%E8%A6%81%E7%A7%BB%E5%8A%A8%E7%9A%84%E4%BD%8D%E6%95%B0%22)%3B%20%0D%0Adocument.getElementById(%22move_no%22).focus()%3B%20%0D%0A%7D%20%0D%0Adocument.getElementById(%22move_no%22).value%3D%22%22%3B%20%0D%0A%7D%20%0D%0Adocument.getElementById(%22shuzhiquxiao%22).onclick%3Dfunction()%7B%20%0D%0Ahidden_input_div()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20show_input_div()%7B%20%0D%0Adocument.getElementById(%22show_input%22).style.display%3D%22block%22%3B%20%0D%0A%7D%20%0D%0Afunction%20hidden_input_div()%7B%20%0D%0Adocument.getElementById(%22show_input%22).style.display%3D%22none%22%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> <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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移1</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移2</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移3</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移4</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移5</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移6</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移7</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移8</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移9</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> <tr> <td height="25"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Up_Move(this);">上移10</a></td> <td><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" onclick="Down_Move(this);">下移</a></td> </tr> </table> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20mouseposition(ev)%7B%20%0D%0Aif(ev.pageX%20%7C%7C%20ev.pageY)%7B%20return%20%7Bx%3Aev.pageX%2C%20y%3Aev.pageY%7D%3B%7D%20%0D%0Areturn%20%7Bx%3Aev.clientX%2Bdocument.body.scrollLeft-document.body.clientLeft%2Cy%3Aev.clientY%2Bdocument.body.scrollTop-document.body.clientTop%7D%20%0D%0A%7D%20%0D%0Avar%20showContent%20%3D%20document.getElementById('showContent').getElementsByTagName('a')%20%0D%0Afor(i%3D0%3Bi%3CshowContent.length%3Bi%2B%2B)%7B%20%0D%0AshowContent%5Bi%5D.onmouseover%20%3D%20function(ev)%7B%20%0D%0Aev%3Dev%7C%7Cwindow.event%3B%20%0D%0AmousePos%3Dmouseposition(ev)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程