JavaScript实现表格行移动:兼容IE与Firefox
作者:小圆点时间:2026-10-24 09:04:55浏览:236
本文介绍如何使用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文件,需再次刷新页面方可执行相关脚本。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
