jQuery实现用户信息表格的添加和删除功能-js教程-PHP中文网

这篇文章主要介绍了jquery实现用户信息表格的添加和删除功能,代码简单易懂，非常不错，具有参考和jquery的价值，对jquery感兴趣的朋友可以参考下本篇文章

1、浏览器界面

一个简单的用户信息操作

2、html代码


  
    
      用户录入
      

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

      
        乔峰
        qiao@163.com
        18212345678
        
          删除

用户名	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实现用户信息表格的添加和删除功能，希望对大家有所帮助！！

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

下载