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. Servlet完全教程

    Servlet 是一些遵从Java Servlet API的Java类,这些Java类可以响应请求.尽管Servlet可以响应任意类型的请求,但是它们使用最广泛的是响应web方面的请求. Servle ...

  2. python之读取文件的测试数据

    假设我们有一个叫testdata.txt的文件,现在在这个文件里面有测试数据,我们怎么利用前2小章学习的知识,读取测试数据呢? 测试数据如下: url:https://www.cnblogs.com/ ...

  3. Luogu P1282 多米诺骨牌 DP。。背包？

    背包...差不多..QWQ 设f[i]为达到差值为i的状态需要多少次,那就很显然了: 注意区分正负不同的代价的循环方向 技巧:如果不想改负数的话,那可以移动一下数组下标,用一个新的指针指向原来的数组 ...

  4. Oracle 11g 新特性 --SQL Plan Management 说明

    Oracle 11g 新特性 --SQL Plan Management 说明 参见大神博主文章: http://blog.csdn.net/tianlesoftware/article/detail ...

  5. m3m4加载器的优化版m3m4-v1.1

    m3m4加载器的优化版m3m4-v1.1 /* //1.以$开头的模块名,表示服务,服务只会执行一次,它可以有自己的方法.比如cookie就是一个服务 //例如:console.log("r ...

  6. 坐标&接龙型动态规划 - 20181026

    109. Triangle 此题还可以用DFS,记忆化搜索去做,二刷实现 public class Solution { /** * @param triangle: a list of lists ...

  7. html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）

    这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...

  8. switch case 注意事项+1 及 case合并综合练习例子

    case可以合并: 练习11:根据输入的星期,得到具体每天做的事情.星期一学习,星期二学习,星期三自习,星期四学习,星期五自习,星期六学习,星期日学习 class Switch02{ public s ...

  9. springboot项目中引用其他springboot项目jar

    1. 剔除要引入的springboot项目中不需要的文件:如Application和ApplicationTests等 2.打包 不能使用springboot项目自带的打包插件进行打包: 3.打包 4 ...

  10. 安卓获取输入法高度与ViewTreeObserver讲解

    目录 安卓获取输入法高度 前言 清单 开始 ViewTreeObserver讲解 获取输入法高度原理 思路 实现 关于ViewTreeObserver 定义 继承 摘要 获取View高度的三种方法 源 ...