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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php生成xml简单实例代码
2009/12/16 PHP
php适配器模式介绍
2012/08/14 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php-msf源码详解
2017/12/25 PHP
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python pandas用法最全整理
2019/08/04 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
个人借款协议书范本
2014/11/17 职场文书
暂停营业通知
2015/04/25 职场文书
交通事故被告代理词
2015/05/23 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python