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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
document.createElement()用法
2013/03/13 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python实现红包裂变算法
2016/02/16 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
爱我中华教学反思
2014/04/28 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
银行贷款收入证明
2014/10/17 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书