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. P3596 [POI2015]MOD

    $ \color{#0066ff}{ 题目描述 }$ 给定一棵无根树,边权都是1,请去掉一条边并加上一条新边,定义直径为最远的两个点的距离,请输出所有可能的新树的直径的最小值和最大值 \(\color ...

  2. NAND NOR Flash 和MTD

    来自:http://blog.sina.com.cn/s/blog_6b489d5e0102xm62.html 一.NAND和NOR Flash 一般来说,快闪记忆体可分为两大规格,一个是NAND, ...

  3. sql 表字段模糊连接

    select AreauserCode,RtuName from TB_AreaUser as tau right join TB_MaintenanceInfo inf on inf.RtuName ...

  4. 安装python发行版本，并用conda来管理Environments，Python，packages

    简介:anaconda指的是一个开源的python发行版本,其包含了conda.Python等180多个科学包及其依赖项. 因为包含了大量的科学包,Anaconda 的下载文件比较大(约 515 MB ...

  5. SQL函数:返回传入的字符中的数字或者字符

    /******返回传入的字符串的所有字符 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOALTER function [dbo].[F_Get ...

  6. 瀑布模型，（增量开发）渐增式开发，原型化开发，统一过程模型（RUP）

    瀑布模型:设计在开发阶段 瀑布模型有以下优点 1)为项目提供了按阶段划分的检查点. 2)当前一阶段完成后,您只需要去关注后续阶段. 3)可在迭代模型中应用瀑布模型. 增量迭代应用于瀑布模型.迭代1解决 ...

  7. pip 使用代理

    pip install -i https://mirrors.aliyun.com/pypi/simple/ opencv-python 红色部分 代表使用 阿里云 代理 安装 pip

  8. C# Autofac 的 BeanFactory

    using Autofac; using Microsoft.Practices.ServiceLocation; namespace Core.Common { /// <summary> ...

  9. hibernateUtil类

    package com.test.Util; import org.hibernate.SessionFactory; import org.hibernate.cfg.AnnotationConfi ...

  10. phpcms V9 框架目录结构

    phpcms v9框架的目录结构分析:      了解v9框架的目录结构,有助于帮助我们快速建立起对v9框架的一个整体认识 打开"mycms"项目,有如下文件和目录      使用 ...