JQuery实现表格行的上移、下移、删除、增加

<%@ 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>
时间: 2024-10-07 03:43:04

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

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

为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations are not supported on table rows.).所以设法用其他解决方案.最后使用jq方法配合 CSS3 transform 实现. /** * @param {Object} $fstElem 目标行 * @param {Object} $scdElem 被换行 * @param {

jquery行上移下移删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

jquery更改表格行顺序实例

使用jquery写的更改表格行顺序的小功能表格部分: 复制代码代码如下: <table class="table" id="test_table">  < thead> < tr>  < th>时间</th> < th>详情</th>  < th>操作</th> < /tr>  < /thead> < tbody> <

表格行的添加和删除

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格中的添加和删除</title> <link href="../../css/main.css" type="text/css" rel="stylesheet"/> <link

jquery 行交换 上移 下移

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>表格数据上下行互换位置</title>

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

删除之前删除2行后: 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv

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

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px"> <tr> <td width="20%">序</td> <td >标题</td> <td >描述</td> <td >操作&

JS~一个列表中包含上移下移删除等功能

最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&

JQuery实现表格的增加行和删除行

利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8