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. system表空间空间不足解决办法

    场景描述: 系统表空间空间不足,导致应用无法正常连接!!! 环境描述: ORACLE 11G 查看当前表空间的整体使用情况,以及有没有开启自动扩展,以及扩展的最大限制!!! ---tablespace ...

  2. NPOI读取excel文件导出数据, 而此时文件正在打开中抛异常怎么办

    项目中需要用到一些数值表格, 方便起见都是用excel来的. 而如果excel正打开中, 直接使用npoi制作的工具来导出数据的话, 在这一行将会异常: workbook = new XSSFWork ...

  3. 课程一(Neural Networks and Deep Learning)，第三周（Shallow neural networks）—— 2、Practice Questions

    1.以下哪一项是正确的?(检查所有适用的) (A,D,F,G) A.  a[2] 表示第二层的激活函数值向量. B. X 是一个矩阵, 其中每一行都是一个训练示例. C. a[2] (12) 表示第二 ...

  4. android开发学习——day7

    线性布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  5. android开发学习——day6

    关于UI的几个插件学习 button和textview,以及点击button利用Toast提醒,editText private EditText editText; @Override protec ...

  6. npm 安装 cannot find module

    window7安装module出现 Connot find module 'xxx' 解决办法: 添加环境变量命名为:NODE_PATH 设置值为:%AppData%\npm\node_modules ...

  7. java EE第一周博客

    一,课程目标 能够完成javaee开发框架的深入学习,能够熟练的构建出基本开发框架,熟练掌握配置文件以及各种插件的应用.实现一个较为复杂的javaee项目 二.企业级应用与互联网应用的区别 企业级应用 ...

  8. wamp配置虚拟路径（路径别名）

    wamp默认的路径是安装目录下的 www 目录, 如果你想运行php代码,就需要将代码放在 www 目录下, 但这样很不方便,能否通过配置的方式,来实现 在别的目录下的 php 代码,也能正常运行和访 ...

  9. Leetcode 746. Min Cost Climbing Stairs

    思路:动态规划. class Solution { //不能对cost数组进行写操作,因为JAVA中参数是引用 public int minCostClimbingStairs(int[] cost) ...

  10. CRM项目hellokitty部分交互界面

    登录界面 实现密码的不显示,验证码的跟换 员工管理界面  完成所有的功能 学校统计界面 完成所有的功能 班级管理 差一个手风琴组件 其他功能也完成了