编程 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 相关文章推荐

HTML颜色选择器实现代码

Nov 23 Javascript

Js Jquery创建一个弹出层可加载一个页面

May 08 Javascript

Javascript学习笔记之函数篇（一） : 函数声明和函数表达式

Jun 24 Javascript

javascript实现多级联动下拉菜单的方法

Feb 06 Javascript

JavaScript生成随机字符串的方法

Mar 19 Javascript

微信JS SDK接入的几点注意事项(必看篇)

Jun 23 Javascript

使用AngularJS对表单提交内容进行验证的操作方法

Jul 12 Javascript

vue proxyTable 接口跨域请求调试的示例

Sep 12 Javascript

开源一个微信小程序仪表盘组件过程解析

Jul 30 Javascript

js设计模式之代理模式及订阅发布模式实例详解

Aug 15 Javascript

在SSM框架下用laypage和ajax实现分页和数据交互的方法

Sep 27 Javascript

解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题

Nov 20 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