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 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
koa2 从入门到精通(小结)
Jul 23 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
小偷PHP+Html+缓存
2006/12/20 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
php简单实现快速排序的方法
2015/04/04 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
vscode自定义vue模板的实现
2021/01/27 Vue.js
python购物车程序简单代码
2018/04/18 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
python怎么自定义捕获错误
2020/06/29 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
运动会跳远广播稿
2014/02/04 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
趣味运动会策划方案
2014/06/02 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
见习报告格式要求
2014/11/04 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2014年财政局工作总结
2014/12/09 职场文书
检讨书格式范文
2015/05/07 职场文书
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL