<%@ 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. IP封包协议头/TCP协议头/TCP3次握手/TCP4次挥手/UDP协议头/ICMP协议头/HTTP协议（请求报文和响应报文）/IP地址/子网掩码(划分子网)/路由概念/MAC封包格式

    IP协议头IP包头格式: 1.版本号:4个bit,用来标识IP版本号.这个4位字段的值设置为二进制的0100表示IPv4,设置为0110表示IPv6.目前使用的IP协议版本号是4. 2.首部长度:4个 ...

  2. php 快速导出大量CSV文件

    原文链接 https://segmentfault.com/a/1190000005366832 /** * 导出excel(csv) * @data 导出数据 * @headlist 第一行,列名 ...

  3. 04--activiti demo

    核心API1:ProcessEngine说明:1) 在Activiti中最核心的类,其他的类都是由他而来.2) 产生方式: ProcessEngine processEngine = ProcessE ...

  4. C++实现顺序栈类求解中缀表达式的计算

    控制台第一行打印的数值为使用形如以下方式得到的结果: cout << +*(+)*/- << endl; 即第一个待求解表达式由C++表达式计算所得结果,以用于与实现得出的结果 ...

  5. LA 4064 (计数 极角排序) Magnetic Train Tracks

    这个题和UVa11529很相似. 枚举一个中心点,然后按极角排序,统计以这个点为钝角的三角形的个数,然后用C(n, 3)减去就是答案. 另外遇到直角三角形的情况很是蛋疼,可以用一个eps,不嫌麻烦的话 ...

  6. 大数据学习——linux常用命令（三）

    三 文件操作 1创建文件 touch somefile.txt 创建一个空文件somefile.txt > 重定向操作符 echo "woshiwoa"> some.t ...

  7. 一个爬取lativ诚衣网站上模特穿搭图片的爬虫

    show the code: [peter@localhost savvy]$ vi lativ.py # -*- coding:utf-8 -*- import requests,lxml,os f ...

  8. NYOJ-517-最小公倍数,大数啊~~~

    最小公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致.但也并非纯粹的偶然:60是个优秀的数字,它的 ...

  9. PHP建立和删除目录

    <?php/*linux中的文件权限filedir 用户 组 其它 rwx rwx rwx 读写执行 6 4 6 读写 读 读写 7 7 7 rw_ r__ rw_ r__ _w_ ___ r ...

  10. 【BZOJ2560】串珠子（状压DP，容斥原理）

    题意: 铭铭有n个十分漂亮的珠子和若干根颜色不同的绳子.现在铭铭想用绳子把所有的珠子连接成一个整体.现在已知所有珠子互不相同,用整数1到n编号.对于第i个珠子和第j个珠子,可以选择不用绳子连接,或者在 ...