删除之前

删除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. WPF学习（10）模板

    在前面一篇我们粗略说了Style和Behaviors,如果要自定义一个个性十足的控件,仅仅用Style和Behaviors是不行的,Style和Behaviors只能通过控件的既有属性来简单改变外观, ...

  2. RandomAccessFile实时读取大文件（转）

    最近有一个银行数据漂白系统,要求操作人员在页面调用远端Linux服务器的shell,并将shell输出的信息保存到一个日志文件,前台页面要实时显示日志文件的内容.这个问题难点在于如何判断哪些数据是新增 ...

  3. 几个cd快速提示

    cd是project师每天都会用到的命令. 今天就来分享几条和cd有关的小技巧 cd 假设你用cd ~来进入当前用户的home文件夹的话,那么能够试试直接敲cd. 相同效果,少敲两下键盘. cd - ...

  4. SQL入门学习4-复杂查询

    5-1 视图 视图和表 视图和表的区别只有一个是否保存了实际的数据 使用INSERT和SELECT实际上就是从存储设备中读取数据,各种计算后,将数据呈现给用户. 视图不会将数据保存在存储设备中.实际上 ...

  5. 移动端 (基于jquery的3个)touch插件

    //第一个 Author: Alone Antroduction: 高级前端开发工程师 Sign: 人生没有失败,只有没到的成功. //依赖jQuery 或者Zepto <script> ...

  6. 【BZOJ3627】【JLOI2014】路径规划 分层图

    意甲冠军:要查找.有门户网站:http://www.lydsy.com/JudgeOnline/problem.php? id=3627 注意:点的等待时长示意图为: 非常清晰了吧?没事,不清晰就不清 ...

  7. zzu--2014年11月16日月潭赛 C称号

    1230: Magnets Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 24  Solved: 13 [id=1230" style=&q ...

  8. C＃精华（文章3版本）笔记

    C#精华(文章3版本) 跳转至: 导航. 搜索 文件夹 1 C#概述 2 数据类型 3 运算符和控制流 4 方法和參数 5 类 6 继承 7 接口 8 值类型(struct) 9 合式类型 10 异常 ...

  9. Rightmost Digit（快速幂）

    Description Given a positive integer N, you should output the most right digit of N^N.               ...

  10. MySql创建一个存储过程

    MySQL 存储过程是从 MySQL 5.0 新功能.存储过程的长处有一箩筐.只是最基本的还是运行效率和SQL 代码封装. 特别是 SQL 代码封装功能,假设没有存储过程,在外部程序訪问数据库时(比如 ...