1、浏览器界面

一个简单的用户信息操作

2、html代码

正文表单名称="用户表单"中心用户录入br /用户名：输入id=' username ' name=' username ' type=' text ' size=15/E-mail :输入id=' email ' name=' email ' type=' text ' size=15/电话：输入id='tel '名称='电话'类型=“文本”大小=15 /输入类型='按钮'值='添加id='btn_submit' /输入类型='按钮'值='删除所有id=' BTN _移除所有'/中心/表单-HR/表格边框=' 1 '对齐='中心'单元格填充=0单元格间距=0宽度=400第用户名/th thE-mail/th电话/th操作/th/tr/ad-t车身id=' userTbody ' tr TD乔峰/TD TD TD[电子邮件受保护]/TD TD 18212345678/TD TD a href=' # ' class=' MyCLz '删除/a /td /tr /tbody - /table/body3、jQuery实现

$(函数(){ $('#btn_submit ')).单击(函数(){ //获取用户输入的值var usernameVal=$('#username ').val()；var emailVal=$('#email ').val()；var telVal=$('#tel ').val()；var tr=' trtd ' usernameVal '/tdtd ' emailVal '/tdtd ' TelVal '/tdtdtdtda href=' # ' class=' myClz '删除/a/TD/tr '；$('#userTbody ').追加(tr)；});//全部删除$('#btn_removeAll ').单击(函数(){ $('#userTbody ')).empty()；});//删除一行数据/*点击只对本身页面有的元素有作用，对于后面新加的元素，不起作用$('.我的CLz ').单击(function(){ console。日志(123))；});*//*选择id=userTbody元素下所有样式名含有myClz的标签，并添加点击事件*当点击后，向上一级找到tr元素，然后删除*/$('#userTbody ').打开('点击','。myClz '，function () { $(this).最近的(' tr ').移除();});});总结

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