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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
Js和VUE实现跑马灯效果
May 25 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php中使用sftp教程
2015/03/30 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
Python中的集合类型知识讲解
2015/08/19 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
白酒营销策划方案
2014/08/17 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
鲁迅故里导游词
2015/02/05 职场文书
现场施工员岗位职责
2015/04/11 职场文书
学校工会工作总结2015
2015/05/19 职场文书
党员转正大会主持词
2015/07/02 职场文书