jQuery实现的调整表格行tr上下顺序


Posted in Javascript onJanuary 10, 2016

表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能。

代码实例如下:

<!DOCTYPE html>
<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>

通过以上代码简单实现了jQuery实现的调整表格行tr上下顺序,希望本段代码可以帮助到大家。

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue实现路由切换改变title功能
May 28 Javascript
javascript实现checkbox复选框实例代码
Jan 10 #Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 #Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 #Javascript
理解Angular数据双向绑定
Jan 10 #Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 #Javascript
JavaScript电子时钟倒计时第二款
Jan 10 #Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
javascript下string.format函数补充
2010/08/24 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
微信小程序 同步请求授权的详解
2017/08/04 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
带你认识Django
2019/01/15 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
副总经理岗位职责
2014/03/16 职场文书
党性分析自查总结
2014/10/14 职场文书
民事调解书范文
2015/05/20 职场文书
《比的意义》教学反思
2016/02/18 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Python实现随机生成迷宫并自动寻路
2021/06/13 Python