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

在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行，很多情况下我们都是在页面来设置一个隐藏域的值，然后在js方法里动态的++或--，在学习jQuery的过程中，我试着用简单的方法来模拟实现这一个过程

效果图如下：

删除之前

删除2行后：

改进后具体代码如下：

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5<script type="text/javascript" src="jquery-1.3.1.js"></script>
 6<title></title>
 7<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>
43</head>
44<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>
60</body>
61</html>

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

  1. jQuery实现表格行的动态增加与删除

    删除之前删除2行后: 1<script> 8 $(document).ready(function(){ 9 //<tr/>居中 10 $("#tab tr" ...

  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. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

随机推荐

  1. JavaScript的 sourcemap 的理解

    当我们在使用vue-cli 开发项目完成后, 就要进行部署,执行npm run build 命令,你会发现它生成.js文件的同时,还会生成一个对应的.map 文件. 当时查了一下, .map 文件的主 ...

  2. iPhone

    电报交流***vpnpay app不能用了,只要能下载就可以用,谨慎卸载 升级.网络链接不成功的,多试几次,毕竟程序不会运行你的错误操作 ,重新添加链接服务器,继续搞!耐心的进行下面操作即可链接,如有 ...

  3. 获取SpringMVC所有的rest接口及其对应函数信息

    package com.geostar.gfstack.operationcenter.core.cloud.action; import com.geostar.gfstack.operationc ...

  4. BZOJ2521[Shoi2010]最小生成树——最小割

    题目描述 Secsa最近对最小生成树问题特别感兴趣.他已经知道如果要去求出一个n个点.m条边的无向图的最小生成树有一个Krustal算法和另一个Prim的算法.另外,他还知道,某一个图可能有多种不同的 ...

  5. Educational Codeforces Round 61 (Rated for Div. 2)

    A. Regular Bracket Sequence 题意:给出四种括号的数量 ((  )) ()  )( 问是否可以组成合法的序列(只能排序不能插在另外一个的中间) 思路: 条件一:一个或 n个) ...

  6. WIN8.1下Prolific USB-to-Serial Comm Port驱动黄色感叹号问题

    文章解决来源:http://blog.csdn.net/gsj0791/article/details/17664861 在做fpga口的uart回环测试时候,由于开发板上的是usb转uart,所以需 ...

  7. php 部署在iis HTTP 错误 500.0 - Internal Server Error 无法在<fastCGI>应用程序配置中找到<handler> scriptProcessor

    原因,从A服务器复制一个部署在IIS上的PHP项目,根节点指向 publc/web.config 把里面涉及的  php路径改成正确的即可

  8. mysql 0x80004005 unable to connect to any of the specified mysql hosts

    语言:c# 问题:偶尔会出现连不上mysql 报标题的这个错误. 解决方法:把server = localhost 改为 =127.0.0.1 或者静态IP  ,按着改暂时没出现了,继续观望!

  9. 利用纯粹的CSS3替代小图标---向右箭头

    1.向右的箭头>  . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片   比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...

  10. Manacher's Algorithm && 647. Palindromic Substrings 计算回文子串的算法

    注:转载自:https://www.cnblogs.com/love-yh/p/7072161.html