脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jq 列表增加删除

jQuery实现列表的增加和删除功能

 更新时间：2018年06月14日 17:07:47   作者：心晴安夏  
这篇文章主要介绍了jQuery实现列表的增加和删除功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

具体代码如下所示:

<!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="#" rel="external nofollow" rel="external nofollow" >delete</a></td>
        </tr>
        <tr>
          <td>c</td>
          <td>3453</td>
          <td><a href="#" rel="external nofollow" rel="external nofollow" >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实现列表的增加和删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 轻松学习jQuery插件EasyUI EasyUI表单验证

    轻松学习jQuery插件EasyUI EasyUI表单验证

    轻松学习jQuery插件EasyUI，本文的重点在于EasyUI表单验证，并告诉大家如何提交表单，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • Jquery Ajax请求代码(2)

    Jquery Ajax请求代码(2)

    总结了一下了一下$.getJSON()一些应用，希望大家喜欢，首先我用的的是 Newtonsoft.Json.Net20.dll
    2011-01-01
  • jquery获取被勾选的checked(选中)的那一行的3列和4列的值

    jquery获取被勾选的checked(选中)的那一行的3列和4列的值

    大家可能会遇到这种需求通过jquery获取被勾选的checked的那一行的3列和4列的值，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • JQuery Ajax跨域调用和非跨域调用问题实例分析

    JQuery Ajax跨域调用和非跨域调用问题实例分析

    这篇文章主要介绍了JQuery Ajax跨域调用和非跨域调用问题,结合具体实例形式分析了jQuery基于ajax的非跨域请求及跨域请求相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-04-04
  • jquery实现动态添加附件功能

    jquery实现动态添加附件功能

    这篇文章主要为大家详细介绍了jquery实现动态添加附件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • jQuery对象和DOM对象相互转化

    jQuery对象和DOM对象相互转化

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；
    2009-04-04
  • jquery插件validate验证的小例子

    jquery插件validate验证的小例子

    2013-05-05
  • JQuery优缺点分析说明

    JQuery优缺点分析说明

    如果你还在犹豫是否要学习一个JavaScript框架，并困惑于选择哪一个框架，那么我推荐你选择jQuery。这并非说其它框架不好，只是jQuery可能是最稳妥和最具回报性的选择。
    2010-06-06
  • 深入浅出 jQuery中的事件机制

    深入浅出 jQuery中的事件机制

    本文重点给大家介绍jquery中的事件机制，涉及到onload和ready两者的区别介绍，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
    2016-08-08
  • jquery实现可横向和竖向展开的动态下滑菜单效果

    jquery实现可横向和竖向展开的动态下滑菜单效果

    这篇文章主要介绍了jquery实现可横向和竖向展开的动态下滑菜单效果,以实例形式较为详细的分析了jquery实现横向与竖向展开菜单的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08

最新评论