宜宾网站建设公司

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://ybzwz.com/article/iiijgc.html

其他资讯