删除之前

删除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. solr/solrj原子更新

    lucene原子更新自己不用多介绍,但solr它的包装,下面是一个简单的介绍是:这个操作是用于索引非常有用. 详细在代码中使用例如以下: /** * 原子更新方式 * */ public static ...

  2. Android属于查询执行情况的电话号码

    这部分是昨天学习,但是因为眼所以现在到眼睛超负荷,以后要合理规划时间. 现在里面的手机号码归属地查询主要通过两种途径:1.网络查询.2.匹配本地归属地数据库. 我认为最好的两个方法的结合,在进行联网查 ...

  3. MPC8313ERDB不新鲜pkg包裹，把文件放进Ramdisk

    MPC8313ERDB不新鲜pkg包裹,把文件放进Ramdisk 经ltib编译器生成rootfs.ext2.gz.uboot它可以直接uboot采用.假设我们编写了相应的外部文件把Ramdisk往里 ...

  4. lodoop打印控制具体解释

    注意:这就需要引进的打印控制(我上传Demo同时): install_lodop32.exe install_lodop64.exe LodopFuncs.js jquery-1.10.0.min.j ...

  5. Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    Oracle中关于处理小数点位数的几个函数,取小数位数,Oracle查询函数 关于处理小数点位数的几个oracle函数()1. 取四舍五入的几位小数select round(1.2345, 3) fr ...

  6. adp设备是什么

    今天在写软工文档的可行性分析部分的时候.遇到一个新名词--adp,瞬间就不淡定了.原话例如以下: 6.1.1 基本建设投资 包含採购.开发和安装下列各项所需的费用,如: a. 须要提供一件教室,供开发 ...

  7. 随笔 - Internet缓存文件

    Internet缓存文件 本文地址: http://blog.csdn.net/caroline_wendy 互联网上全部的使用记录, 图片, 音乐, 视频, 都会缓存在本地. 1. 位置: IE-& ...

  8. POJ - 2828 Buy Tickets (段树单点更新)

    Description Railway tickets were difficult to buy around the Lunar New Year in China, so we must get ...

  9. hdu 4115 石头剪子布（2-sat问题）

    /* 意甲冠军:石头剪子布,目前已知n周围bob会有什么,对alice限制.供u,v,w:设w=0说明a,b回合必须出的一样 否则,必须不一样.alice假设输一回合就输了,否则就赢了 解: 2-sa ...

  10. 体验VS2015正式版

    初次体验VS2015正式版,安装详细过程.   阅读目录 介绍 安装 介绍    纽约时间7月20日,微软发布了vs 2015 正式版,换算到我们的北京时间就是晚上了,今天回到家里,就下下来了,装上去 ...