大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

 1、浏览器界面

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 成都创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站建设、网站设计、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!

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

一个简单的用户信息操作

2、html代码


  
用户录入
用户名: E-mail: 电话:
----------------------------
---------------------------- ----------------------------
用户名 E-mail 电话 操作
乔峰 qiao@163.com 18212345678 删除

3、jQuery实现

$(function () {
  $("#btn_submit").click(function () {
    // 获取用户输入的值
    var usernameVal = $("#username").val();
    var emailVal = $("#email").val();
    var telVal = $("#tel").val();
    var tr = "" + usernameVal + "" + emailVal
      + "" + telVal
      + "删除";
    $("#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实现用户信息表格的添加和删除功能
标题链接:http://dzwzjz.com/article/iiijgc.html
在线咨询
服务热线
服务热线:028-86922220
TOP