code display ::

<!DOCTYPE HTML>
<html>
    <head>
        
    <link href="bootstrap.css" rel="stylesheet">
    </head>
    <body>
         <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1,000</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td class="shangyi">dolor</td>
                  <td class="xiayi">sit</td>
                </tr>
                <tr>
                  <td>1,001</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td class="shangyi">adipiscing</td>
                  <td class="xiayi">elit</td>
                </tr>
                <tr>
                  <td>1,002</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td class="shangyi">odio</td>
                  <td class="xiayi">Praesent</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td class="shangyi">cursus</td>
                  <td class="xiayi">ante</td>
                </tr>
                <tr>
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td class="shangyi">Sed</td>
                  <td class="xiayi">nisi</td>
                </tr>
              </tbody>
            </table>
        </div>
        
        
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="bootstrap.js"></script>
        <script>
            $(function(){
                $(".shangyi").click(function(){
                    var $currentTr = $(this).parent();
                    var $prevTr = $currentTr.prev();
                    if($prevTr){
                        $currentTr.insertBefore($prevTr);
                    }
                });
                $(".xiayi").on('click',function(){
                    var $currentTr = $(this).parent();
                    var $nextTr = $currentTr.next();
                    if($nextTr){
                        $currentTr.insertAfter($nextTr);
                    }
                    
                });
            });
        </script>
    </body>
</html>

以上代码展示表格行点击事件的上下移动的效果，表格用到了bootstrap的样式

TR move up && TR move down的更多相关文章

  1. jquery获取tr并更改tr内容

    jquery获取tr并更改tr内容示例代码. 例子: $(document).ready(function() { $("#Email tr").each(function(){ ...

  2. c++11 move构造函数和move operator 函数 学习

    先看个代码吧!!!!!!!!!! #include <iostream> using namespace std; class A { public: A(){cout<<&q ...

  3. tr:even 与tr:odd

    :even匹配所有索引值为偶数的元素,从 0 开始计数查找表格的1.3.5...行(即索引值0.2.4...)<table> <tr><td>Header 1< ...

  4. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

  5. java实现表格tr拖动

    实现功能:js实现表格tr拖动,并保存因为拖动改变的等级. jsp代码 <div id="mainContainer"> <div class="con ...

  6. c++11 标准库函数 std::move 和 完美转发 std::forward

    c++11 标准库函数 std::move 和 完美转发 std::forward #define _CRT_SECURE_NO_WARNINGS #include <iostream> ...

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

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

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

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

  9. Linux tr命令

    介绍 tr命令可以对来自标准输入的字符进行替换.压缩和删除.tr只能接收来自标准的输入流,不能接收参数. 语法 tr [OPTION]... SET1 [SET2] 注意:SET2是可选项 OPTIO ...

随机推荐

  1. js去重方法

    function remove(array){ var obj={}; newarray=[]; for(var i in array){ console.log(i); var arg=array[ ...

  2. .NET Core 版本不支持的问题

    分析一个.NET Core开源项目(Ocelot),打开后发现提示当前版本.NET Core 不支持. 错误信息如下: The current .NET SDK does not support ta ...

  3. shared_ptr智能指针

    来自博客:https://www.cnblogs.com/lzpong/p/6188034.html 多线程程序经常会遇到在某个线程A创建了一个对象,这个对象需要在线程B使用, 在没有shared_p ...

  4. 提交post请求，参数为xml格式

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  5. php 利用 json 传递数组之中文乱码最新解决办法

    json好用,但是如果数据中有中文就会出乱子了,网上解决办法多半是设置utf-8编码或转换字符编码 以下是我的解决办法,利用php的urlencode.urldecode函数(其实也是一种转换编码吧) ...

  6. Codeforces Round #462 (Div. 2), problem: (C) A Twisty Movement （求可以转一次区间的不递增子序列元素只有1，2）

    题目意思: 给长度为n(n<=2000)的数字串,数字只能为1或者2,可以将其中一段区间[l,r]翻转,求翻转后的最长非递减子序列长度. 题解:求出1的前缀和,2的后缀和,以及区间[i,j]的最 ...

  7. 115th LeetCode Weekly Contest Prison Cells After N Days

    There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, whether the ...

  8. C#工具类之素数扩展类

    /// <summary> /// 素数帮忙类 /// 本类是从.net源码 类 internal static class HashHelpers 类里抽取相应的代码 /// https ...

  9. 青蛙的约会----POJ1061

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 133905   Accepted: 29707 Descript ...

  10. 使用 PuTTY 时遇到错误：“expected key exchange group packet from server”

    情况 使用 PuTTY 通过 SSH 访问 ProxySG 或 Advanced Secure Gateway (ASG) 时,您会看到如下错误:"expected key exchange ...