删除之前

删除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. HihoCoder——Trie树

    本文出自:http://blog.csdn.net/svitter 原题:http://hihocoder.com/contest/hiho2/problem/1 题解:使用Trie树..基础题目.一 ...

  2. HDU 4309 Seikimatsu Occult Tonneru 网络流量+像缩进

    主题链接:点击打开链接 意甲冠军: 题意:给出一张N(N<=100)个点,M(M<=1000条)边的有向图. 每一个点上都有一些人.每条边有4个属性(u,v,w,p). 这些边分为三种:( ...

  3. MEF初体验之六：导出和元素据

    在导出声明这一节中解释了部件导出服务和值的基础知识.在某些情况下,出于多种原因,关联与导出相关的信息是有必要的.通常,它被用来解释一个指定的普通契约实现的能力.这对于允许导入约束满足它的导出,或者导入 ...

  4. Android：创建耐磨应用 - 定义自己的布局

    创建自己的自定义布局(Creating Custom Layouts) 本文介绍如何创建自己的自定义通知和使用可穿戴UI库来创建自己的自定义布局同时你还需要知道耐磨设计标准(Wear Design P ...

  5. Azure File Service in IIS

    微软Azure的Storage套件中提供了新的服务File Service,让我们运行在Azure中的程序都能共享存储,一个存储账号共享的没有上线,但每个共享的上限是5G.由于File Service ...

  6. CI框架学习笔记

    打印SQL语句$this->dbRead->last_query(); 重映射方法正如上文所说,URI 的第二段通常决定控制器的哪个方法被调用.CodeIgniter 允许你使用 _rem ...

  7. ES6 扫盲

    原文地址:ECMAScript 6 扫盲--小胡子 1. let.const 和 block 作用域 let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var: var a ...

  8. boost在自己主动确定数据类型（BOOST_TYPEOF和BOOST_AUTO）使用

    #include<boost/typeof/typeof.hpp> #include<vector> #include<iostream> #include BOO ...

  9. 虚拟化（一）：虚拟化和vmware产品描述

    由于公司最近取得了虚拟化监控,因此,我们需要虚拟化的认识,总结学习,对于虚拟化的概念.从百度百科,例如下列:         虚拟化.是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机.在一台计算机上 ...

  10. Tyvj P1016 包装问题 （DP）

    底 Background 太原诚成中学2模拟法庭竞赛 第三条道路 描写叙述 Description 有一个箱子容量为v(正整数.o≤v≤20000).同一时候有n个物品(o≤n≤30).每一个物品有一 ...