1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery</title>
  6.     <style>
  7.  
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <table style="margin: 10px auto;" id="tableList">
  13.             <thead>
  14.                 <tr>
  15.                     <th>name</th>
  16.                     <th>price</th>
  17.                     <th>delete</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>a</td>
  23.                     <td>123</td>
  24.                     <td><a href="#">delete</a></td>
  25.                 </tr>
  26.                 <tr>
  27.                     <td>c</td>
  28.                     <td>3453</td>
  29.                     <td><a href="#">delete</a></td>
  30.                 </tr>
  31.             </tbody>
  32.         </table>
  33.     </div>
  34.  
  35.    <form>
  36.        <table style="margin:0 auto;">
  37.            <tr>
  38.                <td>name</td>
  39.                <td><input type="text" name="name"></td>
  40.            </tr>
  41.            <tr>
  42.                <td>price</td>
  43.                <td><input type="text" name="price"></td>
  44.            </tr>
  45.            <tr>
  46.                <td colspan="2">
  47.                    <input type="submit" value="submit" id="add">
  48.                </td>
  49.            </tr>
  50.        </table>
  51.    </form>
  52.  
  53. <script src="../js/vendor/jquery-3.2.1.min.js"></script>
  54. <script>
  55.     var $tableList=$("#tableList");
  56.     //tianjia
  57.     $("#add").click(function(){
  58.         var tdName= $("input[name=name]").val();
  59.         var tdPrice = $("input[name=price]").val();
  60.         $("<tr></tr>").append("<td>"+tdName+"</td>")
  61.             .append("<td>"+tdPrice+"</td>")
  62.             .append("<td><a href='#?'>delete</a></td>")
  63.             .appendTo($("#tableList>tbody"))
  64.             .find("a").click(function(){
  65.              $(this).parent().parent().remove();
  66.             });
  67.  
  68.             $("input[name=name]").val("");
  69.             $("input[name=price]").val("");
  70.         return false;
  71.  
  72.     })
  73.     //delete
  74.     $("#tableList>tbody a").click(function(){
  75.         $(this).parent().parent().remove();
  76.     })
  77.  
  78. </script>
  79. </body>
  80. </html>

jQuery实现列表的增加和删除的更多相关文章

  1. AngularJS实现数据列表的增加、删除和上移下移等功能实例

      转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...

  2. jQuery文档处理(增加与删除文档)

    1.追加内容

  3. python3之对本地TXT文件进行增加，删除，修改，查看功能。

    由于是初学,代码如有不足,欢迎指出! 本博客记录我的编程之路,记录所学到的知识,分享所学心得! 这是我的一个作业. 首先分析要求: 创建一个TXT文件用于存储账号与密码 实现对文件进行增加,删除,修改 ...

  4. 使用jQuery增加或删除元素(内容)

    使用jQuery增加或删除元素(内容):一.jQuery添加元素或内容:1,append() 方法:在被选元素的结尾插入元素或内容 2,prepend() 方法:被选元素的开头插入元素或内容. 3,a ...

  5. jQuery实现表格行的动态增加与删除(改进版)

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

  6. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

  7. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  8. 10月16日下午MySQL数据库CRUD操作（增加、删除、修改、查询）

    1.MySQL注释语法--,# 2.2.后缀是.sql的文件是数据库查询文件. 3.保存查询. 关闭查询时会弹出提示是否保存,保存的是这段文字,不是表格(只要是执行成功了表格已经建立了).保存以后下次 ...

  9. jquery动态移除/增加onclick属性详解

     本文章给大家介绍利用jquery的removeAttr与attr事件来给a标签增加与删除onclick事件的具体操作方法,有需要了解的朋友可参考. 要实现效果:点击链接先去掉onclick属性,3秒 ...

随机推荐

  1. SpringBoot访问html访问不了的问题

    springboot默认是不支持jsp的 注意pom.xml是否添加了thymeleaf的依赖 <dependency> <groupId>org.springframewor ...

  2. php测试工具

    如果是测压力有apache的ab如果要看性能则有xdebug和xhprof.还有linux的strace命令来跟踪程序的执行时的系统调用

  3. ab 压测工具使用

    转自:http://www.cnblogs.com/lemtree/articles/1676641.html 就是APACHE自带的测试工具AB(apache benchmark).在APACHE的 ...

  4. myeclipse 2013破解注册图文教程

    以下这个试过有效 http://www.33lc.com/article/10792.html

  5. Alpha 冲刺报告（1/10）

    Alpha 冲刺报告 队名:洛基小队 峻雄(组长) 已完成:α版要完成的第一部分的游戏内容规划 明日计划:学习脚本教程,熟悉一下相关API 剩余任务:物品背包交互脚本 困难:对于JS脚本的不熟悉:如何 ...

  6. 深入理解php中的ini配置(2)

    继续接着上一篇写. 运行时改变配置 在前一篇中曾经谈到,ini_set函数可以在php执行的过程中,动态修改php的部分配置.注意,仅仅是部分,并非所有的配置都可以动态修改.关于ini配置的可修改性, ...

  7. yarn-site.xml

    要保证spark on yarn的稳定性,避免报错,就必须保证正确的配置,尤其是yarn-site.xml. 首先来理解一下yarn-site.xml各个参数的意义(引自董的博客) 注:下面<v ...

  8. python文件读写模式 --- r,w,a,r+,w+,a+,rb,wb

    要了解文件读写模式,需要了解几种模式的区别,以及对应指针 r : 读取文件,若文件不存在则会报错 w: 写入文件,若文件不存在则会先创建再写入,会覆盖原文件 a : 写入文件,若文件不存在则会先创建再 ...

  9. 为什么 Category 不能增加成员变量-nonfragile

    三.既然是 non-fragile ivars,为什么 Category 不能增加成员变量?     看过一些资料,理由并不是很让人信服.我觉得并不是做不到,只是现在没有做,现在不支持.我在 Opti ...

  10. Yii2.0 发送文件

    1.发送文件 和浏览器跳转类似,文件发送是另一个依赖指定 HTTP 头的功能, Yii 提供方法集合来支持各种文件发送需求,它们对 HTTP 头都有内置的支持. yii\web\Response::s ...