JavaScript实现表格行移动:兼容IE与Firefox

作者:小圆点

时间:2026-10-24

浏览:235

本文介绍如何使用JavaScript动态调整HTML表格中行的位置,重点解决IE与Firefox浏览器的兼容性问题。通过DOM方法实现行的上移与下移功能,并提供完整的示例代码供参考。

文章目录

JavaScript表格行移动实现与兼容处理

<!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>  <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">上移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>  </body> </html>

注意:若通过Ctrl+A全选并引入外部JavaScript文件,需再次刷新页面方可执行相关脚本。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章