删除之前

删除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. POJ1458 Common Subsequence 【最长公共子序列】

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37614   Accepted: 15 ...

  2. 使用hql当异常查询：Xxx is not mapped[from Xxx where ...]

    采用当今项目hql询问.出现    QingAoCenterInfo is not mapped[from QingAoCenterInfo where...] 显然地Hibernate映射关系出现了 ...

  3. WPF学习（2）XAML

    XAML(eXtensible Application Markup Language,可扩展应用程序标记语言)是一种声明式的编程语言,遵循XML的语法.WPF使用XAML来设计UI具有易用性.高效性 ...

  4. [Python]sqlite3二进制文件存储问题(BLOB)(You must not use 8-bit bytestrings unless you use a text_factory...)

    事情是这种: 博主尝试用Python的sqlite3数据库存放加密后的usernamepassword信息,表是这种 CREATE TABLE IF NOT EXISTS user ( userID ...

  5. 数组名取地址所算数运算应注意的&quot;trap&quot;

    数组名取地址所算数运算应注意的"trap" 直接看代码: #include <stdio.h> int main() { int array[5]; printf(&q ...

  6. Hadoop0.20.2 Bloom filter应用演示样例

    1. 简单介绍 參见<Hadoop in Action>P102 以及 <Hadoop实战(第2版)>(陆嘉恒)P69 2. 案例 网上大部分的说明不过依照<Hadoop ...

  7. 体验安装金蝶K/3 Wise 13.0（图像）

    金蝶13.0它提供windows7支持,而数据库也升级到SQL server 2008,有许多功能上的改善和增强.原本在位置低版本号需要时间来管理此功能,因为有这个模块没有原因一直没能起来,现在,新版 ...

  8. GMSK调制仿真

    GMSK 调制的的原理非常简单. 就是MSK调制前进行Gauss滤波. 在实现中有这样的方法,首先产生高斯系数,对称的上升陂和下降陂系数.输入一个符号,进行上采样,经过高斯滤波器,滤波器的输出做有符号 ...

  9. 怎么理解Condition(转)

    在java.util.concurrent包中,有两个很特殊的工具类,Condition和ReentrantLock,使用过的人都知道,ReentrantLock(重入锁)是jdk的concurren ...

  10. Android重力加速度传感器数据去噪

    public void onSensorChanged(SensorEvent event) { final float alpha = 0.8; gravity[0] = alpha * gravi ...