宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

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

更多资讯
游戏推荐
更多+