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

 1、浏览器界面

一个简单的用户信息操作

2、html代码

  

    
      用户录入
      

      用户名:
      
      E-mail:
      
      电话:
      
      
      
    
  
  ----------------------------
  

  
    ----------------------------
    
    ----------------------------
  

    

      

        
用户名
        
E-mail
        
电话
        
操作
      
    

      

        
乔峰
        
[email protected]
        
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实现用户信息表格的添加和删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！