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. 【sping揭秘】9、容器内部事件发布（二）

    写在前面---------------------------------- 命运多舛,痴迷淡然 不知下一步该往哪里走,现在应该是我的迷茫期... 加油,快点走出去!!! 聪明的网友们,你们有没有迷茫 ...

  2. java—单例设计模式

    单例设计模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 1.构造方法私有化 2.声明一个本类对象 3.给外部提供一个静态方法获取对象实例 什么时候使用? 1.通过在工具类的设计中使用: ...

  3. 【Canal源码分析】整体架构

    本文详解canal的整体架构. 一.整体架构 说明: server代表一个canal运行实例,对应于一个jvm instance对应于一个数据队列 (1个server对应1..n个instance) ...

  4. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  5. Java类加载顺序

    很长时间没看这方面的内容了,写篇文章让自己牢记一下,顺便分享一下. 首先,写代码以便检验结果.测试代码: public class Test { public static void main(Str ...

  6. Solidity数组

    一.固定长度的数组(Arrays) 1.固定长度类型数组的声明 pragma solidity ^0.4.4; contract C { // 数组的长度为5,数组里面的存储的值的类型为uint类型 ...

  7. Java 容器之 Connection栈队列及一些常用

    集合家族图 ---|Collection: 单列集合 ---|List: 有存储顺序 , 可重复 ---|ArrayList: 数组实现 , 查找快 , 增删慢 ---|LinkedList: 链表实 ...

  8. su - oracle /bin/bash: Permission denied

     1) 以root身份执行 stat /  命令 查看权限是否正确 2) chmod 755 / 3) chmod 755 /bin/bash

  9. 版本管理（一）之Git和GitHub的区别（优点和缺点）

    Git 简介 https://www.yiibai.com/git/getting-started-git-basics.html Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或 ...

  10. 网络之NSURLSession

    NSUrlSession参考的这篇博客,自己也调试了它的代码:http://www.it165.net/pro/html/201406/15223.html ,对NSUrlSession还不太理解,先 ...