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. python学习，day1：循环判断基本语句的几个代码

    # coding=utf-8 # Author: RyAn Bi count = 0 '''while True : print('count:',count) count = count + 1 i ...

  2. C++_类继承1-从一个简单的类开始

    面向对象编程的主要目的之一是:提供可重用的代码.尤其是项目很庞大的时候,重用测试过的代码比重新编码代码要好得多. C++提供了更高层次的重用性.其中之一就是继承这个概念. 一些厂商提供了类库.类库由类 ...

  3. LeetCode6. Z字形变换

    描述 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows li ...

  4. 【算法笔记】B1035 插入与归并

    1035 插入与归并 (25 分) 根据维基百科的定义: 插入排序是迭代算法,逐一获得输入数据,逐步产生有序的输出序列.每步迭代中,算法从输入序列中取出一元素,将之插入有序序列中正确的位置.如此迭代直 ...

  5. HDU6312 Game(博弈，拿出本数与这个数的除数)

    题意:A和B玩游戏 , 给出1 ~ n 的集合 ,每个人可以拿出一个数 , 这个数的除数也被拿出 , A先开始 , 没有数拿的人就输 , 问A赢不赢 分析:很有意思的一道题目 ///假设2 ~ n A ...

  6. setlocal enabledelayedexpansion 解释

    看字面的意思是:设置本地为延迟扩展.其实也就是:延迟变量,全称"延迟环境变量扩展", 在cmd执行命令前会对脚本进行预处理,其中有一个过程是变量识别过程,在这个过程中,如果有两个% ...

  7. ACM 计算几何向量

    向量 简介注意事项基本计算 加减法 ~ 示例代码 长度 ~ 示例代码 数乘 ~ 示例代码 点积 应用 ~ 示例代码 叉积 ~ 示例代码 性质与应用 经典题目 向量旋转 操作目的 模板代码 简介 向量, ...

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

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

  9. win10 安装MySQL8.0.11记录。

    参考了博客A:https://blog.csdn.net/m0_37788308/article/details/79965378 博客B:https://blog.csdn.net/fxbin123 ...

  10. Web API 解决跨域问题

    一.跨域问题的由来 同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容. 正是由于这个原因,我们不同项目之间的调用就会被浏览器阻 ...