<%@ 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. web即时通信技术

    ajax jsonp polling setInterval定期发送ajax请求.服务器压力大,浪费流量,大部分是无效请求 ajax long polling ajax发起请求,服务器对于这个请求一直 ...

  2. 【HDU 3037】Saving Beans（卢卡斯模板）

    Problem Description Although winter is far away, squirrels have to work day and night to save beans. ...

  3. DEV Express中NavBarCointrol的使用

    尚未对内容进行删减,内容有偏差和冗余,谨慎阅读. 发现在后面,写在前面: 13,之前在Default模式下,之所以很多Appearance属性都起不到作用,是因为Control的LookAndFeel ...

  4. Leetcode 289.生命游戏

    生命游戏 根据百度百科,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个细胞.每个细胞具有一个初始状 ...

  5. hexo干货系列：（八）hexo文章自动隐藏侧边栏

    前言 使用Jacman主题的时候发现打开具体文章后,侧边栏还是会展示,我想要的效果是自动隐藏侧边栏,并且展示目录.但是当我修改了主题配置文件里面close_aside属性为true的时候,发现侧边栏隐 ...

  6. 短视频 SDK 架构设计实践

    作者简介 孔维乐,七牛云客户端团队 Android 平台高级开发工程师,专注音视频,图形图像领域.OpenGL 专家,先后参与直播推流及连麦 SDK 的开发,主导短视频 SDK 的架构设计与实现, 对 ...

  7. HDU 1426 dancing links解决数独问题

    题目大意: 这是一个最简单的数独填充题目,题目保证只能产生一种数独,所以这里的初始9宫格较为稠密,可以直接dfs也没有问题 但最近练习dancing links,这类数据结构解决数独无疑效率会高很多 ...

  8. 关于系统中使用多个PropertyPlaceholderConfigurer的配置

    多数的鲜为人知方法都是因为有着罕见的应用,就比如说Spring中PropertyPlaceholderConfigurer这个类,它是用来解析Java Properties属性文件值,并提供在spri ...

  9. 子串（codevs 4560）

    题目描述 Description 有两个仅包含小写英文字母的字符串A和B.现在要从字符串A中取出k个互不重叠的非空子串,然后把这k个子串按照其在字符串A中出现的顺序依次连接起来得到一个新的字符串,请问 ...

  10. Error:Uninitialized object exists on backward branch 70 Exception Details:

    网上下载了一个demo,编译出现如下错误: Gradle sync failed: Uninitialized object exists on backward branch 70 Exceptio ...