代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery动态添加和删除行-蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("#getAtr").click(function(){
    var $str='';
    $str+="<tr align='center'>";
    $str+="<td><input type='text' name='advTitle[]'/></td>";
    $str+="<td><input type='file' name='img[]' /></td>";
    $str+="<td><input type='text' name='advContent[]' /></td>";
    $str+="<td><input type='text' name='advSource[]' /></td>";
    $str+="<td><input type='text' name='advAuthor[]' /></td>";
    $str+="<td><input type='text' name='advPosition[]' /></td>";
    $str+="<td onClick='getDel(this)'><a href='#'>删除</a></td>";
    $str+="</tr>";
    $("#addTr").append($str);
  });
});
function getDel(obj)
{
  $(obj).parent().remove();
}
</script>
</head>
<body>
<table align="center" border="1"width="100%">
  <tr align="center">
    <td>蚂蚁部落一</td>
    <td>蚂蚁部落二</td>
    <td>蚂蚁部落三</td>
    <td>蚂蚁部落四</td>
    <td>蚂蚁部落五</td>
    <td>蚂蚁部落六</td>
    <td align="center"><a href="#" id="getAtr">追加内容</a></td>
  </tr>
  <tbody id="addTr">
    <tr align="center">
      <td><input type="text" name="advTitle[]"/></td>
      <td><input type="file" name="img[]" /></td>
      <td><input type="text" name="advContent[]" /></td>
      <td><input type="text" name="advSource[]" /></td>
      <td><input type="text" name="advAuthor[]" /></td>
      <td><input type="text" name="advPosition[]" /></td>
      <td></td>
    </tr>
  </tbody>
  <tr align="center">
    <td colspan="5"><input type="submit" value="全部添加" /></td>
  </tr>
</table>
</body>

</html>

以上代码可以动态添加表格的行,并且表格行的末尾有删除按钮,当点击删除的时候,可以删除当前行,下面介绍一下实现过程。
一.实现原理:
原理特别的简单,就是事先声明一个字符串,此字符串就是要添加的行的内容,当点击追加按钮之后,就会通过append()函数将此字符串追加到表格的末尾,当点击删除按钮就会删除按钮所在的父节点,也就是当前行。

jQuery如何动态添加具有删除按钮的行的更多相关文章

  1. jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> ...

  2. jQuery动态添加、删除按钮及input输入框

    输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...

  3. jquery 如何动态添加、删除class样式方法介绍

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  4. jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  5. Jquery Validate动态添加和删除校验规则

    以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...

  6. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

  7. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  8. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  9. Unity NGUI中动态添加和删除sprite

    (以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...

随机推荐

  1. Cycles_per_instruction

    https://en.wikipedia.org/wiki/Cycles_per_instruction

  2. PHP- 深入PHP、Redis连接

    pconnect, phpredis中用于client连接server的api. The connection will not be closed on close or end of reques ...

  3. 05-Java 集合类详解

    (1)Java集合-Collection A.集合可以理解为一个动态的对象数组,不同的是集合中的对象内容可以任意扩充 B.集合特点:性能高,容易扩展和修改 C.Collection的常用子类:List ...

  4. 03-Java String字符串详解

    1.Java字符串String A.实例化String字符串:直接赋值(更合理一些,使用较多).使用关键字new. B.String内容的比较 // TODO Auto-generated metho ...

  5. 【转】[NOIP2003普及组]麦森数

    来源:http://vivid.name/tech/mason.html 不得不纪念一下这道题,因为我今天一整天的时间都花到这道题上了.因为这道题,我学会了快速幂,学会了高精度乘高精度,学会了静态查错 ...

  6. SSDB

    一个高性能的支持丰富数据结构的 NoSQL 数据库, 用于替代 Redis. 特性 替代 Redis 数据库, Redis 的 100 倍容量 LevelDB 网络支持, 使用 C/C++ 开发 Re ...

  7. 【dubbo】dubbo-admin在jdk 1.8上部署出错问题

    今天在linux上部署dubbo-admin-2.5.4,一直报错: ERROR context.ContextLoader - Context initialization failedorg.sp ...

  8. 【solr】 solr 5.4.1 和tomcat 基础环境搭建

    下载省略; solr下载地址:http://www.apache.org/dyn/closer.cgi/lucene/solr/ tomcat 下载安装(省略). solr5.4.1 默认在jetty ...

  9. windows p12(pfx)个人证书安装过程

    证书库个人证书存储区为其中的每个证书维护一个属性CERT_KEY_PROV_INFO_PROP_ID,该属性指定了证书对应的密钥容器的相关信息,包括密钥容器名,CSP名称,CSP类型,密钥用途,以及C ...

  10. [转]Neutron演进

    在OpenStack世界中,网络组件最初叫nova-network,它混迹于计算节点nova的代码库中.nova-network可以单独部 署在一台机器上,为了高性能HA也可以和nova-comput ...