脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 调整 tr上下顺序

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

 更新时间：2016年01月10日 14:28:27   作者：程序员小菜  
表格元素是大家比较常用的元素，有时候表格中的行需要调整顺序，下面通过代码实例介绍一下如何利用jquery实现此功能

表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用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上下顺序，希望本段代码可以帮助到大家。

您可能感兴趣的文章:

相关文章

  • jQuery实现鼠标移入显示蒙版效果

    jQuery实现鼠标移入显示蒙版效果

    这篇文章主要为大家详细介绍了jQuery实现鼠标移入显示蒙版效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • jquery mobile事件多次绑定示例代码

    jquery mobile事件多次绑定示例代码

    这种绑定方法会在整个document每pageinit一次,就对xxx进行的某一事件进行绑定,而pageinit事件什么时候会触发，感兴趣的朋友可以了解下
    2013-09-09
  • javascript制作2048游戏

    javascript制作2048游戏

    这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈
    2015-03-03
  • jQuery使用经验小技巧(推荐)

    jQuery使用经验小技巧(推荐)

    下面小编就为大家带来一篇jQuery使用经验小技巧(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery实现页面顶部显示的进度条效果完整实例

    jQuery实现页面顶部显示的进度条效果完整实例

    这篇文章主要介绍了jQuery实现页面顶部显示的进度条效果,以完整实例形式分析了jQuery基于animate与setTimeout定时触发实现进度条渐进显示功能,非常简单实用,需要的朋友可以参考下
    2015-12-12
  • 自己动手制作基于jQuery的Web页面加载进度条插件

    自己动手制作基于jQuery的Web页面加载进度条插件

    进度条插件在GitHub上多种多样数量繁多,这总结出页面进度条插件的实现要点,来教大家自己动手制作基于jQuery的Web页面加载进度条插件
    2016-06-06
  • jQuery实现DIV层淡入淡出拖动特效的方法

    jQuery实现DIV层淡入淡出拖动特效的方法

    这篇文章主要介绍了jQuery实现DIV层淡入淡出拖动特效的方法,涉及jQuery针对鼠标操作的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 最新最热最实用的15个jQuery插件汇总

    最新最热最实用的15个jQuery插件汇总

    本文给大家汇总介绍了2015年7月最新发布的最热最实用的15款jQuery插件，都有着非常炫酷的效果，十分的实用，这里推荐给大家。
    2015-07-07
  • 防止jQuery ajax Load使用缓存的方法小结

    防止jQuery ajax Load使用缓存的方法小结

    本篇文章主要是对防止jQuery ajax Load使用缓存的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序

    JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序

    这篇文章主要介绍用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript（jsjac）框架构建一个BS Web的聊天应用程序。此程序可以和所有连接到Openfire服务器的应用进行通信、发送消息。如果要运行本程序还需要一个聊天服务器Openfire
    2012-08-08

最新评论