1. <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8.   <head>
  9.     <base href="<%=basePath%>">
  10.     <title>My JSP 'index.jsp' starting page</title>
  11.     <meta http-equiv="pragma" content="no-cache">
  12.     <meta http-equiv="cache-control" content="no-cache">
  13.     <meta http-equiv="expires" content="0">
  14.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15.     <meta http-equiv="description" content="This is my page">
  16.     <script type="text/javascript" src="/Test/js/jquery.min.js"></script>
  17.     <script type="text/javascript">
  18.     //删除
  19.     function del(t){
  20.       $(t).parent().parent().remove();
  21.     }
  22.  
  23.     //上移
  24.     function up(t){
  25.      var i=$(t).parent().parent().index();//当前行的id
  26.      if(i>1){//不是表头，也不是第一行，则可以上移
  27.        var tem0=$(t).parent().parent().html();
  28.        var tem1=$(t).parent().parent().prev().html();
  29.        $(t).parent().parent().prev().html(tem0);
  30.        $(t).parent().parent().html(tem1);
  31.      }
  32.     }
  33.     //下移
  34.     function down(t){
  35.      var l=$("#MyTB tr").length;//总行数
  36.      var i=$(t).parent().parent().index();//当前行的id
  37.      if(i<l-1){//不是最后一行，则可以下移
  38.        var tem0=$(t).parent().parent().html();
  39.        var tem1=$(t).parent().parent().next().html();
  40.        $(t).parent().parent().next().html(tem0);
  41.        $(t).parent().parent().html(tem1);
  42.      }
  43.     }
  44.     function add(t){
  45.      var tem0=$(t).parent().parent().html();
  46.      $(t).parent().parent().append("<tr>"+tem0+"</tr>");
  47.     }
  48.     </script>
  49.   </head>
  50.   <body>
  51.     <table id="MyTB">
  52.       <tr>
  53.         <td>xxxxxxxx</td>
  54.         <td>xxxxxxxx</td>
  55.         <td>xxxxxxxx</td>
  56.         <td>xxxxxxxx</td>
  57.         <td>
  58.         </td>
  59.       </tr>
  60.       <tr>
  61.         <td>11111111</td>
  62.         <td>11111111</td>
  63.         <td>11111111</td>
  64.         <td>11111111</td>
  65.         <td>
  66.         <input type="button" value="上" onclick="up(this)" />
  67.         <input type="button" value="下" onclick="down(this)" />
  68.         <input type="button" value="删" onclick="del(this)" />
  69.          <input type="button" value="加" onclick="add(this)" />
  70.         </td>
  71.       </tr>
  72.       <tr>
  73.         <td>22222222</td>
  74.         <td>22222222</td>
  75.         <td>22222222</td>
  76.         <td>22222222</td>
  77.         <td>
  78.         <input type="button" value="上" onclick="up(this)" />
  79.         <input type="button" value="下" onclick="down(this)" />
  80.         <input type="button" value="删" onclick="del(this)" />
  81.          <input type="button" value="加" onclick="add(this)" />
  82.         </td>
  83.       </tr>
  84.       <tr>
  85.         <td>33333333</td>
  86.         <td>33333333</td>
  87.         <td>33333333</td>
  88.         <td>33333333</td>
  89.         <td>
  90.         <input type="button" value="上" onclick="up(this)" />
  91.         <input type="button" value="下" onclick="down(this)" />
  92.         <input type="button" value="删" onclick="del(this)" />
  93.          <input type="button" value="加" onclick="add(this)" />
  94.         </td>
  95.       </tr>
  96.       <tr>
  97.         <td>44444444</td>
  98.         <td>44444444</td>
  99.         <td>44444444</td>
  100.         <td>44444444</td>
  101.         <td>
  102.         <input type="button" value="上" onclick="up(this)" />
  103.         <input type="button" value="下" onclick="down(this)" />
  104.         <input type="button" value="删" onclick="del(this)" />
  105.          <input type="button" value="加" onclick="add(this)" />
  106.         </td>
  107.       </tr>
  108.       <tr>
  109.         <td>55555555</td>
  110.         <td>55555555</td>
  111.         <td>55555555</td>
  112.         <td>55555555</td>
  113.         <td>
  114.         <input type="button" value="上" onclick="up(this)" />
  115.         <input type="button" value="下" onclick="down(this)" />
  116.         <input type="button" value="删" onclick="del(this)" />
  117.          <input type="button" value="加" onclick="add(this)" />
  118.         </td>
  119.       </tr>
  120.     </table>
  121.   </body>
  122. </html>

JQuery实现表格行的上移、下移、删除、增加的更多相关文章

  1. jquery为表格行添加上下移动画效果

    为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...

  2. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  3. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  4. jquery更改表格行顺序实例

    使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...

  5. jquery 行交换 上移 下移

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery实现表格行的动态增加与删除

    删除之前删除2行后: 1<script> 8 $(document).ready(function(){ 9 //<tr/>居中 10 $("#tab tr" ...

  7. jQuery实现表格行的动态增加与删除 序号 从 1开始排列

    <table id="tab" border="1" width="60%" align="center" sty ...

  8. jquery实现表格行的动态增加和删除

    $("#Addmaterial").click(function () {//Addmaterial是增加按钮的ID $("#tab tr").attr(&qu ...

  9. 使用jquery扩展表格行合并方法探究

    1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...

随机推荐

  1. C++ Simple Message/Logging Class

    在 Qt的源码与Protobuf 的代码中,看到相同的简单消息(日志)输出的类实现,基本思路是使用宏定义,重载临时类对象,调用类方法或者通过析构函数自动调用输出方法,实现消息输出.这里以 Protob ...

  2. 7 SQL 集合运算

    7 集合运算 7-1 表的加减法 本章将会和大家一起学习“集合运算”操作.在数学领域,“集合”表示“(各种各样的)事物的总和”:在数据库领域,表示“记录的集合”.具体来说,表.视图和查询的执行结果都是 ...

  3. Django框架基础知识08-表关联对象及多表查询

    1.自定义主键字段的创建 AutoFiled(pirmary_key=True) # 一般不会自定义,int类型,自增长 一般不自定义主键. 2.order_by asc desc from djan ...

  4. HDU 1166 排兵布阵（线段树单点更新）

    题意: 给定n个兵营的士兵初始值, 然后有最多40000个操作: 操作一共有两种, 一个是查询给定[a,b]区间兵营的士兵总和. 另一个是增加/减少指定兵营的士兵数目. 输出每次查询的值. 分析: 线 ...

  5. 关联及web_reg_save_param

    一.什么是关联 关联(correlation):脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服务器所响应的内容中查 找,得到相应的值,已变量的形式替换录制时的静 ...

  6. 【HDOJ6304】Chiaki Sequence Revisited（数学）

    题意:给定一个序列a,定义a[1]=a[2]=1,a[n]=a[n-a[n-1]]+a[n-1-a[n-2]](n>=3),求该序列的前n项和是多少,结果对 1e9+7 取模 n<=1e1 ...

  7. 《effective C++》：条款37——绝不重新定义继承而来的缺省参数值

    引子: 阿里的一道题: #include <IOSTREAM> using namespace std; class A{ public: ) { cout<<"a~ ...

  8. phpstorm的破解

    按照PHPstorm进入如下页面: 然后继续单击License  server  输入:http://www.0-php.com:1017    PHPstorm完美运行!!!!!

  9. MySql数据库导出csv文件命令

    MySql数据库导出csv文件命令: MySql数据库导出csv文件命令: mysql> select first_name,last_name,email from account into ...

  10. oracle alert 日志位置

    Oracle 11g Alert log 文件位置的问题 https://blog.csdn.net/yujin2010good/article/details/7690191 https://blo ...