<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <script type="text/javascript" src="/Test/js/jquery.min.js"></script>

    <script type="text/javascript">

    //删除

    function del(t){

      $(t).parent().parent().remove();

    }

    //上移

    function up(t){

     var i=$(t).parent().parent().index();//当前行的id

     if(i>1){//不是表头，也不是第一行，则可以上移

       var tem0=$(t).parent().parent().html();

       var tem1=$(t).parent().parent().prev().html();

       $(t).parent().parent().prev().html(tem0);

       $(t).parent().parent().html(tem1);

     }

    }

    //下移

    function down(t){

     var l=$("#MyTB tr").length;//总行数

     var i=$(t).parent().parent().index();//当前行的id

     if(i<l-1){//不是最后一行，则可以下移

       var tem0=$(t).parent().parent().html();

       var tem1=$(t).parent().parent().next().html();

       $(t).parent().parent().next().html(tem0);

       $(t).parent().parent().html(tem1);

     }

    }

    function add(t){

     var tem0=$(t).parent().parent().html();

     $(t).parent().parent().append("<tr>"+tem0+"</tr>");

    }

    </script>

  </head>

  <body>

    <table id="MyTB">

      <tr>

        <td>xxxxxxxx</td>

        <td>xxxxxxxx</td>

        <td>xxxxxxxx</td>

        <td>xxxxxxxx</td>

        <td>

        </td>

      </tr>

      <tr>

        <td>11111111</td>

        <td>11111111</td>

        <td>11111111</td>

        <td>11111111</td>

        <td>

        <input type="button" value="上" onclick="up(this)" />

        <input type="button" value="下" onclick="down(this)" />

        <input type="button" value="删" onclick="del(this)" />

         <input type="button" value="加" onclick="add(this)" />

        </td>

      </tr>

      <tr>

        <td>22222222</td>

        <td>22222222</td>

        <td>22222222</td>

        <td>22222222</td>

        <td>

        <input type="button" value="上" onclick="up(this)" />

        <input type="button" value="下" onclick="down(this)" />

        <input type="button" value="删" onclick="del(this)" />

         <input type="button" value="加" onclick="add(this)" />

        </td>

      </tr>

      <tr>

        <td>33333333</td>

        <td>33333333</td>

        <td>33333333</td>

        <td>33333333</td>

        <td>

        <input type="button" value="上" onclick="up(this)" />

        <input type="button" value="下" onclick="down(this)" />

        <input type="button" value="删" onclick="del(this)" />

         <input type="button" value="加" onclick="add(this)" />

        </td>

      </tr>

      <tr>

        <td>44444444</td>

        <td>44444444</td>

        <td>44444444</td>

        <td>44444444</td>

        <td>

        <input type="button" value="上" onclick="up(this)" />

        <input type="button" value="下" onclick="down(this)" />

        <input type="button" value="删" onclick="del(this)" />

         <input type="button" value="加" onclick="add(this)" />

        </td>

      </tr>

      <tr>

        <td>55555555</td>

        <td>55555555</td>

        <td>55555555</td>

        <td>55555555</td>

        <td>

        <input type="button" value="上" onclick="up(this)" />

        <input type="button" value="下" onclick="down(this)" />

        <input type="button" value="删" onclick="del(this)" />

         <input type="button" value="加" onclick="add(this)" />

        </td>

      </tr>

    </table>

  </body>

</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. [kuangbin带你飞]专题五 并查集

    并查集的介绍可以看下https://www.cnblogs.com/jkzr/p/10290488.html A - Wireless Network POJ - 2236 An earthquake ...

  2. mysql5.7 在Centeros 6 下自动安装的shell脚本

    概述: 此脚本实现了在Centeros 6版本下自动安装mysql5.7到目录 /opt/mysql-5.7*并且做软连接映射到 /usr/local/mysql,自动修改root密码为:123456 ...

  3. Spring AOP 详细介绍

    一.理解 “面向切面编程” 面向切面编程(Aspect Oriented Programming,AOP)是软件编程思想发展到一定阶段的产物,是对面向对象编程(Object Oriented Prog ...

  4. qemu-img命令

    qemu-img是QEMU的磁盘管理工具,在qemu-kvm源码编译后就会默认编译好qemu-img这个二进制文件.qemu-img也是QEMU/KVM使用过程中一个比较重要的工具,本节对其用法和实践 ...

  5. 部署安装lnmp

    链接:http://pan.baidu.com/s/1skMSgDv 密码:h8rn 此安装包可在阿里云所有linux系统上部署安装.此安装包包含的软件及版本为:nginx:1.0.15.1.2.5. ...

  6. linux网络原理

    1.ipconfig命令使用 显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址. 某一块网卡信息 打开或者关闭某一块网卡 2.ifup和ifdown ifup和ifdown分别是加载网卡信息 ...

  7. 杭电 1596 find the safest road （最小路径变形求最大安全度）

    Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条从u 到 v 的 ...

  8. django1.11 启动错误：Generator expression must be parenthesized

    错误信息: Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0 ...

  9. XV6文件系统

    文件系统 文件系统的目的是组织和存储数据,典型的文件系统支持用户和程序间的数据共享,并提供数据持久化的支持(即重启之后数据仍然可用). xv6 的文件系统中使用了类似 Unix 的文件,文件描述符,目 ...

  10. POJ-1088滑雪，典型的动态规划题，与NYOJ-10skiing一样，但NYOJ上时限是3s,用搜索可以过，但在POJ上就超时了~~

    滑雪 Time Limit: 1000MS                    Memory Limit: 65536k                                        ...