删除之前

删除2行后：

1<!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-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.3.1.js"></script><title></title><script>

 8    $(document).ready(function(){

 9        //<tr/>居中

10        $("#tab tr").attr("align","center");

11

12        //增加<tr/>

13        $("#but").click(function(){

14            var _len = $("#tab tr").length;

15            $("#tab").append("<tr id="+_len+" align='center'>"

16                                +"<td>"+_len+"</td>"

17                                +"<td>Dynamic TR"+_len+"</td>"

18                                +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"

19                                +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"

20                            +"</tr>");

21        })

22    })

23

24    //删除<tr/>

25    var deltr =function(index)

26    {

27        var _len = $("#tab tr").length;

28        $("tr[id='"+index+"']").remove();//删除当前行

29        for(var i=index+1,j=_len;i<j;i++)

30        {

31            var nextTxtVal = $("#desc"+i).val();

32            $("tr[id=\'"+i+"\']")

33                .replaceWith("<tr id="+(i-1)+" align='center'>"

34                                +"<td>"+(i-1)+"</td>"

35                                +"<td>Dynamic TR"+(i-1)+"</td>"

36                                +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"

37                                +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"

38                            +"</tr>");

39        }

40

41    }

42</script></head><body>

45

46    <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">

47        <tr>

48            <td width="20%">序号</td>

49            <td>标题</td>

50            <td>描述</td>

51            <td>操作</td>

52       </tr>

53    </table>

54    <div style="border:2px;

55                border-color:#00CC00;

56                margin-left:20%;

57                margin-top:20px">

58        <input type="button" id="but" value="增加"/>

59    </div></body></html>

jQuery实现表格行的动态增加与删除的更多相关文章

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

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

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

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

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

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

  4. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

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

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

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

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

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

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

  8. hdfs以及hbase动态增加和删除节点

    一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...

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

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

随机推荐

  1. SynchronousQueue、LinkedBlockingQueue、ArrayBlockingQueue性能测试(转)

    听说JDK6对SynchronousQueue做了性能优化,避免对竞争资源加锁,所以想试试到底平时是选择SynchronousQueue还是其他BlockingQueue. 对于容器类在并发环境下的比 ...

  2. 2014年百度之星程序设计大赛 - 资格赛 1002 Disk Schedule（双调欧几里得旅行商问题）

    Problem Description 有非常多从磁盘读取数据的需求,包含顺序读取.随机读取.为了提高效率,须要人为安排磁盘读取.然而,在现实中,这样的做法非常复杂.我们考虑一个相对简单的场景.磁盘有 ...

  3. Java学习路径：不走弯路，这是一条捷径

    1．如何学习编程? JAVA是一种平台.也是一种程序设计语言,怎样学好程序设计不只适用于JAVA,对C++等其它程序设计语言也一样管用.有编程高手觉得,JAVA也好C也好没什么分别,拿来就用.为什么他 ...

  4. 进口fbx角色动画read-only解

    原文链接:http://answers.unity3d.com/questions/8172/how-to-add-new-curves-or-animation-events-to-an-im.ht ...

  5. Mybatis分页插件更新

    分页插件演示:http://blog.csdn.net/isea533/article/details/23831273 分页插件演示样例:http://blog.csdn.net/isea533/a ...

  6. 如何有效抓取SQL Server的BLOCKING信息

    原文:如何有效抓取SQL Server的BLOCKING信息 转自:微软亚太区数据库技术支持组 官方博客 http://blogs.msdn.com/b/apgcdsd/archive/2011/12 ...

  7. 走向DBA[MSSQL篇] 针对大表 设计高效的存储过程【原理篇】 附最差性能sql语句进化过程客串

    原文:走向DBA[MSSQL篇] 针对大表 设计高效的存储过程[原理篇] 附最差性能sql语句进化过程客串 测试的结果在此处 本篇详解一下原理 设计背景 由于历史原因,线上库环境数据量及其庞大,很多千 ...

  8. struts1吊牌&lt;logic:iterate&gt;

    <logic:iterate>主要用于处理网页上的输出集合,集合是其中一般下列之一: 1. java对象的数组 2. ArrayList.Vector.HashMap等 具体使用方法请參考 ...

  9. UVA662- Fast Food

    题意:在一条公路上,有n个酒店,要建造k个供给站(建造在酒店所在的位置),给出酒店的位置,求怎么样建造供给站才干使得每一个酒店都能得到服务且所要走的路程最短. 思路:在i到j酒店建立一个供给站,要使得 ...

  10. Linux Kernel系列 - 黄牛X内核代码凝视

    Hanks.Wang - 专注于操作系统与移动安全研究.Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM    Mail - byhank ...