TR move up && TR move down

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的样式

时间: 2024-10-25 12:23:05

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

tr:even 与tr:odd

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

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

关于jquery实现动态添加table tr的问题我也不多说了 上面代码很多地方都有注释的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str=XXX | XXX | XXX , XXX | XXX | XXX , XXX | XXX | XXX 你也可以保存成对象类型的  我是为了方便后台的操作才这样做的 话不多说直接代码: <html> <head> <meta http-equiv="Content-Typ

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

c++11 标准库函数 std::move 和 完美转发 std::forward #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <vector> #include <map> // C++中还有一个被广泛认同的说法,那就是可以取地址的.有名字的就是左值,反之,不能取地址的.没有名字的就是右值. // 相对于左值,右值表示字面常量.表达式.函数的非

点击modal确定键后删除tr

做第一个笔记,关于 “书单”.2016-09-03关于一个表格调用modal后,在点击表格中的删除按钮弹出modal,点击确定删除后,将一整行tr 删除的功能. 以下内容为table,表示为某班学生. 1 <table class="table table-bordered Stu-tab " id="Stu-tab"> 2 <tr > <td colspan="7" align="left"&g

tr th td

<table>     <caption></caption>     <thead>         <tr>             <th></th>         </tr>     </thead>     <tbody>         <tr>             <td></td>         </tr>     

tr用法

tr用来从标准输入中通过替换或删除操作进行字符转换.tr主要用于删除文件中控制字符或进行字符转换.使用tr时要转换两个字符串:字符串1用于查询,字符串2用于处理各种转换.tr刚执行时,字符串1中的字符被映射到字符串2中的字符,然后转换操作开始-c 用字符串1中字符集的补集替换此字符集,要求字符集为 ASCII.-d 删除字符串1中所有输入字符.-s删除所有重复出现字符序列,只保留第一个:即将重复出现字符串压缩为一个字符串\ a  Ctrl-G 铃声  \ 0 0 7\ b  Ctrl-H 退格符

tr命令的使用及相关练习题

tr命令相关选项: tr-转换或删除字符 常用选项: -c:取字符集的补集 -d:删除匹配的指定字符集中的字符 -s:把连续重复的字符以单独一个字符表示 -t:先删除第一字符集较第二字符集多出的字符 \\:反斜杠 \a:响铃 \b:退格 \n:换行 \r:回车 [:alnum:] :所有的字母和数字                                                 [:alpha:] :所有的字母                                   

linux 基础学习入门 5 inode 总结 tr tee 等小命令

linux day 5 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬盘的时候,不会一个个扇区地读取,这样效率太低,而是一次性连续读取多个扇区,即一次性读取一个"块"(block).这种由多个扇区组成的"块",是文件存取的最小单位."块"的大小,最常见的是4KB,即连续八个 sector组

Move semantics(C++11)

/* * Compile with: *       g++ move_test.c -o move_test -std=c++11 -g -fno-elide-constructors * -fno-elide-constructors disabled the return value optimize. */ #include <iostream> #include <utility> class A { public: A(void) { a = new int; std: