相关文章推荐
欢快的拐杖  ·  String.Trim 方法 ...·  2 周前    · 
欢快的拐杖  ·  【转】python win32api ...·  4 周前    · 
欢快的拐杖  ·  vb.net find files ...·  9 月前    · 
欢快的拐杖  ·  C# ...·  9 月前    · 
欢快的拐杖  ·  Value in ...·  10 月前    · 
欢快的拐杖  ·  [PHP] ...·  10 月前    · 
欢快的拐杖  ·  Start the Grafana ...·  10 月前    · 
伤情的莴苣  ·  IDEA ...·  29 分钟前    · 
狂野的泡面  ·  IntelliJ IDEA 的 Code ...·  30 分钟前    · 
高大的冰棍  ·  3个可以写进简历的京东AI ...·  56 分钟前    · 
帅气的消防车  ·  Spring Boot - ...·  1小时前    · 
完美的红金鱼  ·  Tableau Mobile ...·  1小时前    · 
没人理的蚂蚁  ·  Android ...·  1小时前    · 

jquery实现tr元素的上下移动示例代码

作者:

让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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="#" onclick="down(this)">下移</a></td></tr>
</table>
</body>
</html>
您可能感兴趣的文章:
  • jquery+swiper组件实现时间轴滑动年份tab切换效果
    jquery+swiper组件实现时间轴滑动年份tab切换效果
    2021-04-04
  • jQuery实现全部购物车功能实例
    jQuery实现全部购物车功能实例
    2021-04-04
  • jQuery解决添加元素后不执行原有事件的方法
    jQuery解决添加元素后不执行原有事件的方法
    2021-04-04
  • 详解jQuery的拷贝对象
    详解jQuery的拷贝对象
    2021-04-04
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2024 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号

     
    推荐文章