<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery</title>

    <style>

    </style>

</head>

<body>

    <div>

        <table style="margin: 10px auto;" id="tableList">

            <thead>

                <tr>

                    <th>name</th>

                    <th>price</th>

                    <th>delete</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>a</td>

                    <td>123</td>

                    <td><a href="#">delete</a></td>

                </tr>

                <tr>

                    <td>c</td>

                    <td>3453</td>

                    <td><a href="#">delete</a></td>

                </tr>

            </tbody>

        </table>

    </div>

   <form>

       <table style="margin:0 auto;">

           <tr>

               <td>name</td>

               <td><input type="text" name="name"></td>

           </tr>

           <tr>

               <td>price</td>

               <td><input type="text" name="price"></td>

           </tr>

           <tr>

               <td colspan="2">

                   <input type="submit" value="submit" id="add">

               </td>

           </tr>

       </table>

   </form>

<script src="../js/vendor/jquery-3.2.1.min.js"></script>

<script>

    var $tableList=$("#tableList");

    //tianjia

    $("#add").click(function(){

        var tdName= $("input[name=name]").val();

        var tdPrice = $("input[name=price]").val();

        $("<tr></tr>").append("<td>"+tdName+"</td>")

            .append("<td>"+tdPrice+"</td>")

            .append("<td><a href='#?'>delete</a></td>")

            .appendTo($("#tableList>tbody"))

            .find("a").click(function(){

             $(this).parent().parent().remove();

            });

            $("input[name=name]").val("");

            $("input[name=price]").val("");

        return false;

    })

    //delete

    $("#tableList>tbody a").click(function(){

        $(this).parent().parent().remove();

    })

</script>

</body>

</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. Rxjava学习(一基础篇)

    一.Rxjava跟EventBus的区别 RxJava 是一个响应式编程框架,通过一种扩展的观察者设计模式来实现异步操作. 跟AsyncTask和Handler类似,但是比AsyncTask和Hand ...

  2. maven(13)-安装nexus私服

     环境 nexus最新3.x版需要java1.8,2.x版需要1.7以上.我之前一直用2.x,现在偿试在centos7和window10上分别安装nexus3.x,首先确保系统中已经配好了JDK1 ...

  3. python学习笔记之open函数的用法

    先上一段代码 >>> f = open('1.txt','r'); >>> f.readline() #读取数据>>> f.close() #关闭 ...

  4. 产品从生到死的N宗罪

    写在前面 昨天晚上做了一个梦,大概就是跟CTO,PM在说着什么..现在回想起好像就是说产品怎么怎么的..:索性就吐槽下这几个项目生与死的N宗罪吧.. 特别提示: 本文为全方位吐槽型,前方多处具有针对性 ...

  5. net 4.0+EF6+Sqlite 使用，安装，打包

    开发 1.因为EF不支持Codefirst,开始可以使用SQL来进行开发. 部署安装 2.然后可以找到SQL转Sqlite工具(http://www.cnblogs.com/walkingp/arch ...

  6. APRoundedButton

    APRoundedButton https://github.com/elpsk/APRoundedButton 效果: 源码: APRoundedButton.h // // Created by ...

  7. 乘风破浪：LeetCode真题_011_Container With Most Water

    乘风破浪:LeetCode真题_011_Container With Most Water 一.前言 下面我们继续进行编程练习,可以说对于实际问题的活学活用是非常重要的.比如我们这次的题目,就需要从中 ...

  8. 理解活在Iphone中的那些App （四）

    App生存环境之宿主环境 终于开始说一些技术性的话题了,从这里开始的一些技术细节的东西,以前我也没有太刻意的注意过.为了写这个也是刚刚看了一点资料,如果有纰漏,恳请指出. 一个App生存的宿主环境主要 ...

  9. WebSocket消息推送

    WebSocket协议是基于TCP的一种新的网络协议,应用层,是TCP/IP协议的子集. 它实现了浏览器与服务器全双工(full-duplex)通信,客户端和服务器都可以向对方主动发送和接收数据.在J ...

  10. mongo数据库导入导出数据

    一.Mongodb导出工具mongoexport Mongodb中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指定导出的数据项,也可以根 ...