您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jquery实现tr元素的上下移动示例代码
作者：佚名 责任编辑：admin 更新时间：2022-06-22
让tr元素的上下移动的方法有很多，本文为大家介绍下使用jquery是实现的，感兴趣的朋友可以参考下
代码如下: <html> <head> <title></title> <style type="text/css" > table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } </style> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript" > function up(obj) { var objParentTR = $(obj).parent().parent(); var prevTR = objParentTR.prev(); if (prevTR.length > 0) { prevTR.insertAfter(objParentTR); } } function down(obj) { var objParentTR = $(obj).parent().parent(); var nextTR = objParentTR.next(); if (nextTR.length > 0) { nextTR.insertBefore(objParentTR); } } </script> </head> <body> <table border="0" > <tr><td>1</td><td>12</td><td>13</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr> <tr><td>2</td><td>22</td><td>23</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr> <tr><td>3</td><td>32</td><td>33</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr> <tr><td>4</td><td>42</td><td>43</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr> <tr><td>5</td><td>52</td><td>53</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr> </table> </body> </html>- 上一个程序编程： JS比较两个时间大小的简单示例代码
- 下一个程序编程： js生成随机数之random函数随机示例
