<!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>

最新文章

  1. DDD 主题交流会总结及计划
  2. ISO20000
  3. ping 以及 traceroute 用法
  4. 山东意外险风险信息推送V7非车
  5. HDU 5029 Relief grain 树链剖分打标记 线段树区间最大值
  6. 【思路、优化】UVa 11491 - Erasing and Winning
  7. web安全实战
  8. 【Unity 3D】学习笔记四十一：关节
  9. yum局域网软件源搭建
  10. ES6核心内容精讲--快速实践ES6（一）
  11. 撸一撸Spring Cloud Ribbon的原理-负载均衡器
  12. [Flashback]开启数据库闪回数据库功能
  13. 在多机器上远程执行JMeter
  14. oracle 数据库中某个字段逗号分隔，得到对应列中的个数（列转行）实现方法
  15. 一、hadoop部署
  16. grep语法2
  17. string formating字符串格式化，function函数，group组，recursion递归，练习
  18. 机器学习&amp;深度学习资料收集
  19. POJ-1321.棋盘问题.（回溯）
  20. Kali Linux 网络扫描秘籍

热门文章

  1. Windows 批处理(cmd/bat)常用命令教程
  2. 对于大型公司项目平台选择j2ee的几层认识
  3. MySQL复制报错（Slave failed to initialize relay log info structure from the repository）
  4. 读取本地IP地址和子网页码
  5. ext3 转 ext4 操作
  6. visual studio 2017安装教程以及各类问题解决方案
  7. execl execv
  8. [EffectiveC++]item07：declare destructors virtual in polymorphic base class
  9. python 脚本运行时报错： AttributeError: &#39;module&#39; object has no attribute ***
  10. mac 学习笔记