jQuery实现用户信息表格的添加和删除功能


Posted in jQuery onSeptember 12, 2017

 1、浏览器界面

jQuery实现用户信息表格的添加和删除功能

一个简单的用户信息操作

2、html代码

<body>
  <form name="userForm">
    <center>
      用户录入
      <br />
      用户名:
      <input id="username" name="username" type="text" size=15 />
      E-mail:
      <input id="email" name="email" type="text" size=15 />
      电话:
      <input id="tel" name="tel" type="text" size=15 />
      <input type="button" value="添加" id="btn_submit" />
      <input type="button" value="删除所有" id="btn_removeAll" />
    </center>
  </form>
  ----------------------------
  <hr />
  <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
    <thead>
      <tr>
        <th>用户名</th>
        <th>E-mail</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </thead>
    ----------------------------
    <tbody id="userTbody">
      <tr>
        <td>乔峰</td>
        <td>qiao@163.com</td>
        <td>18212345678</td>
        <td>
          <a href='#' class='myClz'>删除</a>
        </td>
      </tr>
    </tbody>
    ----------------------------
  </table>
</body>

3、jQuery实现

$(function () {
  $("#btn_submit").click(function () {
    // 获取用户输入的值
    var usernameVal = $("#username").val();
    var emailVal = $("#email").val();
    var telVal = $("#tel").val();
    var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
      + "</td><td>" + telVal
      + "</td><td><a href='#' class='myClz'>删除</a></td></tr>";
    $("#userTbody").append(tr);
  });
  // 全部删除
  $("#btn_removeAll").click(function () {
    $("#userTbody").empty();
  });
  //删除一行数据
  /*click只对本身页面有的元素有作用,对于后面新加的元素,不起作用
     $(".myClz").click(function() {
       console.log(123);
     });
   */
  /*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
   *当点击后,向上一级找到tr元素,然后删除
  */
  $('#userTbody').on('click', ".myClz", function () {
    $(this).closest('tr').remove();
  });
});

总结

以上所述是小编给大家介绍的jQuery实现用户信息表格的添加和删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jquery实现抽奖功能
Oct 22 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
You might like
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php获取远程文件内容的函数
2015/11/02 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
十佳护士先进事迹
2014/05/08 职场文书
外国人来华邀请函
2015/01/31 职场文书
公司财务经理岗位职责
2015/04/08 职场文书