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 Easyui一些用法
Aug 01 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
数据库的日期格式转换
2006/10/09 PHP
php session处理的定制
2009/03/16 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Three.JS实现三维场景
2018/12/30 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python制作数据导入导出工具
2015/07/31 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
企划主管岗位职责
2013/12/12 职场文书
工作自我评价怎么写
2014/01/29 职场文书
高中运动会入场词
2014/02/14 职场文书
车队司机自我鉴定
2014/03/02 职场文书
2014企业年终工作总结
2014/12/23 职场文书
政协工作总结2015
2015/05/20 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python