编程 Javascript

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程序设计有所帮助。

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

- Author -

程序员小菜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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