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 相关文章推荐
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
Element Alert警告的具体使用方法
Jul 27 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 模拟$_PUT实现代码
2010/03/15 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
JavaScript事件委托技术实例分析
2015/02/06 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
简单的三步vuex入门
2018/05/20 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
写好自荐信的要点
2013/11/06 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
小加工厂管理制度
2014/01/21 职场文书
企业内控岗位的职责
2014/02/07 职场文书
党员公开承诺书
2014/03/25 职场文书
个人租房协议书
2014/04/09 职场文书
调研汇报材料范文
2014/08/17 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
大学生暑假实习总结
2015/07/13 职场文书
法制教育主题班会
2015/08/13 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL