jquery调整表格行tr上下顺序实例讲解


Posted in Javascript onJanuary 09, 2016

表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下
代码实例如下:

<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css" >
table 
{
 background:#F90;
 width:400px;
 line-height:20px;
}
td 
{
 border-right:1px solid gray;
 border-bottom:1px solid gray;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></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>三水点靠木</td>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <<td>三水点靠木</td>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td>三水点靠木</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
</table>
</body>
</html>

以上代码实现了我们的要求,代码比较简单,这里就不多介绍了。

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js常用代码段整理
Nov 30 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 #Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 #Javascript
javascript跑马灯抽奖实例讲解
Apr 17 #Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 #Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
js代码实现微博导航栏
2015/07/30 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
自动更新作用
2006/10/08 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
Express.JS使用详解
2014/07/17 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
Python中使用支持向量机SVM实践
2017/12/27 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
技能比武方案
2014/05/21 职场文书
安全标语口号
2014/06/09 职场文书
毕业生应聘求职信
2014/07/10 职场文书
高中学生自我评价范文
2014/09/23 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript