jQuery 操作table中的tr换行的步骤如下：

1、获取当前tr

 var $tr = $(this).parents("tr");

2、移动tr

//上移

$tr.prev().before($tr);

//下移

 $tr.next().after($tr);

//置顶

 $(".table").prepend($tr);

在具体例子中的应用

效果

html代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Table数据 上移  下移  置顶</title>

    <link rel="stylesheet" href="css/table.css">

    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>

    <script type="text/javascript">

    </script>

</head>

<body>

<div class="rightSide">

    <div class="whiteBg">

        <div class="bord screen">

            <div class="clear"></div>

        </div>

        <div class="commonTab marTop20">

            <table cellpadding="0" cellspacing="0" class="table">

                <thead>

                <th>序号</th>

                <th>名称</th>

                <th>操作</th>

                </thead>

                <tbody>

                <tr>

                    <td >1</td>

                    <td>第一个</td>

                    <td><a class="Up blueColor">上移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="down blueColor">下移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="top blueColor">置顶</a></td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>第二个</td>

                    <td><a class="Up blueColor">上移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="down blueColor">下移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="top blueColor">置顶</a></td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>第三个</td>

                    <td><a class="Up blueColor">上移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="down blueColor">下移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="top blueColor">置顶</a></td>

                </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

</body>

</html>

jquery操作：

 $(document).ready(function(){

            $(".Up").click(function(){

                var $tr = $(this).parents("tr");

                if ($tr.index() != 0) {//判断是否为第一行

                    var id1=$tr.children("td:first-child").text();//当前序号

                    var id=$tr.prev().children("td:first-child").text();//前一个序号

                    $tr.prev().children("td:first-child").text(id1);//交换序号

                    $tr.children("td:first-child").text(id);

                    $tr.prev().before($tr);

                }

            })

            //下移

            var trLength = $(".down").length;

            $(".down").click(function(){

                var $tr = $(this).parents("tr");

                if ($tr.index() != trLength - 1) {//判断是否为最后一行

                    var id1=$tr.children("td:first-child").text();//当前序号

                    var id=$tr.next().children("td:first-child").text();//下一行序号

                    $tr.next().children("td:first-child").text(id1);//交换序号

                    $tr.children("td:first-child").text(id);

                    $tr.next().after($tr);

                }

            })

            //置顶

            $(".top").click(function(){

                var $tr = $(this).parents("tr");

                $("tbody tr").each(function(){//遍历tr 把序号加一

                    var text =Number($(this).children("td:first-child").text());

                    text=Number(text+1);

                    $(this).children("td:first-child").text(text);

                })

                $tr.fadeOut().fadeIn();

                $tr.children("td:first-child").text(1)//被置顶行的序号置为一

                $(".table").prepend($tr);

                //  $tr.css("color","#f60");

            })

        })

附 css样式表

@charset "utf-8";

/* CSS Document */

/*格式化样式*/

*{margin:;padding:}

body{font:12px/1.5 Microsoft YaHei,Arial, Helvetica, sans-serif;color:#333;background:#edeff3}

table{width:100%; border-collapse:collapse;border:none;border-spacing:}

a{color:#202020;text-decoration:none;cursor: pointer}

img{border:none}

input{vertical-align:middle;outline:none;font-family:Microsoft YaHei;border:none}

input[type="submit"]{cursor:pointer}

textarea{outline:none;outline:none;border:solid 1px #e2e2e2;resize:none}

ul,ol,dl{list-style:none;}

b,em,i,u,strong{font-weight:normal;font-style:normal;text-decoration:none;}

h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal;}

/*公共样式*/

.fl{float:left;}

.fr{float:right;}

.clear{clear:both}

.bord{border-bottom:solid 2px #f2f2f2}

.blueColor {color:#4893cc;}

/**table样式**/

.commonTab {padding: 0 25px; overflow: auto;padding-bottom: 80px;}

.commonTab table tr th {background: #eaeaea;border-left: solid 1px #f9f9f9;}

.commonTab table tr th {height: 35px; background: #eaeaea;font-weight:;font-size: 14px;border-left: solid 1px #f9f9f9;}

.marTop20{margin-top:20px}

.commonTab table tr td {border-left: solid 1px #f9f9f9;}

.commonTab table tr td {padding: 8px 0;font-size: 14px; border: solid 1px #f2f2f2;}

.rightSide{margin-left:10px;padding-top:24px;min-height:1000px;}

.screen {padding: 20px;}

.whiteBg{background:#fff;padding-bottom:70px}

jQuery操作table数据上移、下移和置顶的更多相关文章

  1. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  2. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

  3. mysql选择上一条、下一条数据记录，排序上移、下移、置顶

    1.功能须要 完毕列表排序上移,下移,置顶功能.效果例如以下图所看到的: 2设置思路 设置一个rank为之间戳,通过选择上移,就是将本记录与上一条记录rank值交换,下移就是将本条记录与下一条记录ra ...

  4. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  5. js上移、下移、置顶、置底功能实现

    实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...

  6. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  7. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  8. table中实现数据上移下移效果

    html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...

  9. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

随机推荐

  1. 解决SecureCRT/Xshell无法以root用户连接Ubuntu

    首先执行命令ps -e | grep ssh .查看是否有ssh进程运行. 确认没有ssh运行,且系统未安装openssh.   然后在系统终端界面内输入apt-get update命令. (确保系统 ...

  2. MVC3学习：实现文章上一篇下一篇链接

    文章的显示都是通过id查询数据库来显示.但是文章会经常删除,因此id号可能不是连续的,所以上一篇下一篇文章,不能简单的做id加减法. 我的思路是:先将表格中所有文章的ID号全部放入一个数组中,如果文章 ...

  3. (转)深入浅出 RPC - 深入篇

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mindfloating/article/details/39474123 <深入篇>我们 ...

  4. 自测 基础 js 脚本。

    <html> <head> <script> //function(<text>a{[]}lert('x')</text>)() docum ...

  5. JVM（二）JVM的结构

    1.JVM的结构包括 (1)类加载器 (2)执行引擎 (3)运行时数据区 (4)本地库接口 类加载器:包括启动类加载器.扩展类加载器.应用程序类加载器.自定义加载器. 执行引擎:在执行JAVA代码的时 ...

  6. Centos iptables防火墙关闭启动详解

    CentOS .0默认使用的是firewall作为防火墙,使用iptables必须重新设置一下 .直接关闭防火墙 systemctl stop firewalld.service #停止firewal ...

  7. Java设计模式之工厂方法模式（转） 实现是抽象工厂？

    Java设计模式之工厂方法模式 责任编辑:覃里作者:Java研究组织   2009-02-25   来源:IT168网站   文本Tag: 设计模式 Java [IT168 技术文章]         ...

  8. android开发学习笔记系列（3）--ScrollView与HorizontalScrollView

    ScrollView与HorizontalScrollView 这是一个滚动视图,就是说如果你在你的UI中容不下那么多的内容,且你对自己的UI都已经设置好了px,OK,那么在适应屏幕过程中,我们并不希 ...

  9. Netty 接受请求过程源码分析 (基于4.1.23)

    前言 在前文中,我们分析了服务器是如何启动的.而服务器启动后肯定是要接受客户端请求并返回客户端想要的信息的,否则要你服务器干啥子呢?所以,我们今天就分析分析 Netty 在启动之后是如何接受客户端请求 ...

  10. 并发编程——ConcurrentHashMap#transfer() 扩容逐行分析

    前言 ConcurrentHashMap 是并发中的重中之重,也是最常用的数据结果,之前的文章中,我们介绍了 putVal 方法.并发编程之 ConcurrentHashMap(JDK 1.8) pu ...