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. django 之 发送邮箱

    发送邮箱的话首先在settings文件里写下边的这些设置: #邮件服务配置文件 SSL认证,验证 EMAIL_USE_SSL = True #邮箱服务 EMAIL_HOST = 'smtp.qq.co ...

  2. JS 跨域认识及如何解决

    什么是跨域 指的是浏览器不允许javascrip脚本向其他域名发起ajax请求. 跨域的各种情况判定 URL 说明 是否允许通信 http://www.a.com/a.js http://www.a. ...

  3. github或码云协同开发

    协同开发 1.引子:假如三个人共同开发同一份代码,每个人都各自安排了任务,当每个人都完成了一半的时候,提交不提交呢? 要提交,提交到dev吗,都上传了一半,这样回家拿出来的代码根本跑不起来.所以, 为 ...

  4. 弹出AlertDialog的时候报You need to use a Theme.AppCompat theme (or descendant) with this activity错误

    今天遇到一个bug,用百度地图的时候,我对上面的标注设置了点击监听,设置的相应的反应是弹出一个AlertDialog 记录一解决bug的历程 但是Dialog却没有弹出来,一看AS下面,报了这错,起初 ...

  5. Python爬取 斗图表情，让你成为斗图大佬

    话不多说,上结果(只爬了10页内容) 上代码:(可直接运行)   用到Xpath #encoding:utf-8 # __author__ = 'donghao' # __time__ = 2018/ ...

  6. Strom的trident单词计数代码

    /** * 单词计数 */ public class LocalTridentCount { public static class MyBatchSpout implements IBatchSpo ...

  7. (转)shlex — 解析 Shell 风格语法

    原文:https://pythoncaff.com/docs/pymotw/shlex-parse-shell-style-syntaxes/171 这是一篇协同翻译的文章,你可以点击『我来翻译』按钮 ...

  8. (转)学会数据库读写分离、分表分库——用Mycat，这一篇就够了！

    原文:https://www.cnblogs.com/joylee/p/7513038.html 系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理 ...

  9. android开发学习——day4

    自己手动创建空活动,创建和加载布局,效果:界面中出现靠上对齐的button 在活动中使用Toast,效果:对点击按钮做出响应 在活动中使用menu,效果:界面中出现菜单,并且点击对应选项会有响应 De ...

  10. redis集群环境的搭建和错误分析

    redis集群环境的搭建和错误分析 redis集群时,出现的几个异常问题 09 redis集群的搭建 以及遇到的问题