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. pip指定网址安装

    用pip安装库的有时候很慢都动不了 ,访问速度很慢,不稳定等缺陷 所以呢为了解决这个问题只能指定网址源下载的话速度就很快了 pip安装默认访问的是https://pypi.Python.org/sim ...

  2. Mac安装PhoneGap3

    Mac安装PhoneGap3第一步需要安装NodeJS,在Mac下有一个.pkg安装包(Mac OS X Installer (.pkg),下载下来一路点击就可以安装成功了.在Terminal控制台输 ...

  3. FastDFS概念、原理及CentOS7下安装实战

    一.FastDFS基本概念及基本原理 1.什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并 ...

  4. 【Java初探实例篇01】——Java语言基础

    示例系列,将对每节知识辅以实际代码示例,通过代码实际编写,来深入学习和巩固学习的知识点. IDE:intellij IDEA: 语言:Java 本次示例:Java语言基础知识的应用. 创建包day_4 ...

  5. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（四）：集成 MyBatis 框架

    引入依赖 Spring Boot对于MyBatis的支持需要引入mybatis-spring-boot-starter的pom文件. <dependency> <groupId> ...

  6. <Think Python>中斐波那契使用memo实现的章节

    If you played with the fibonacci function from Section 6.7, you might have noticed thatthe bigger th ...

  7. 图解RAID 0, RAID 1, RAID 5, RAID 10

    RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘,同时希望磁盘失 ...

  8. HDFS恢复误删操作的方法

    1.通过垃圾箱恢复 使用这种方式的前提是在hdfs上面开启trash功能,默认是没有开启的.interval的值默认为0,单位是分钟.只需要在hadoop的配置文件core-site.xml中添加下面 ...

  9. 对Java虚拟机理解

    深入理解Java虚拟机 Java技术体系 Java体系分为四个平台 Java card 运行在小内存上的 Java ME 运行在手机上 Java SE 完整Java 核心api JavaEE 支持使用 ...

  10. Error creating bean with name 'tomcatEmbeddedServletContainerFactory'

    org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration$EmbeddedTomcato ...