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

 1、浏览器界面

一个简单的用户信息操作

2、html代码

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

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

    

      

 
用户名
 
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();
  });
  //删除一行数据
  
  
  $('#userTbody').on('click', ".myClz", function () {
    $(this).closest('tr').remove();
  });
});

总结

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