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


Posted in jQuery onJune 14, 2018

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 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
非常实用的php验证码类
2016/05/15 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue组件jsx语法的具体使用
2018/05/21 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
整理Python中的赋值运算符
2015/05/13 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
什么是python的id函数
2020/06/11 Python
python是怎么被发明的
2020/06/15 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
2014年社区工作总结
2014/11/18 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
圆明园观后感
2015/06/03 职场文书
暂住证明怎么写
2015/06/19 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Java spring定时任务详解
2021/10/05 Java/Android
分享提高 Python 代码的可读性的技巧
2022/03/03 Python