jQuery实现用户信息表格的添加和删除功能
更新时间：2017年09月12日 08:30:28 作者：qzlydao
这篇文章主要介绍了jQuery实现用户信息表格的添加和删除功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
1、浏览器界面
一个简单的用户信息操作
2、html代码
<body>
<form name="userForm">
<center>
用户录入
<br />
用户名:
<input id="username" name="username" type="text" size=15 />
E-mail:
<input id="email" name="email" type="text" size=15 />
电话:
<input id="tel" name="tel" type="text" size=15 />
<input type="button" value="添加" id="btn_submit" />
<input type="button" value="删除所有" id="btn_removeAll" />
</center>
</form>
----------------------------
<hr />
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
----------------------------
<tbody id="userTbody">
<tr>
<td>乔峰</td>
<td>qiao@163.com</td>
<td>18212345678</td>
<td>
<a href='#' class='myClz'>删除</a>
</td>
</tr>
</tbody>
----------------------------
</table>
</body>
3、jQuery实现
$(function () {
$("#btn_submit").click(function () {
// 获取用户输入的值
var usernameVal = $("#username").val();
var emailVal = $("#email").val();
var telVal = $("#tel").val();
var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
+ "</td><td>" + telVal
+ "</td><td><a href='#' class='myClz'>删除</a></td></tr>";
$("#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实现用户信息表格的添加和删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
这两天一直在整这个拖拽的效果，既然学习就要把一个特效的各个方面考虑周全，这样才学到真正的知识。可不，又整理了一个 拖拽的特效。2011-09-09
本篇文章主要是对防止jQuery ajax Load使用缓存的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
下面小编就为大家分享一篇解决Jquery下拉框数据动态获取的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了jQuery实现的鼠标拖动画矩形框,结合实例形式分析了jQuery基于事件响应及页面元素属性动态操作实现的图形绘制相关操作技巧,需要的朋友可以参考下2019-05-05
JavaScript的jQuery库中ready方法的学习教程
这篇文章主要介绍了JavaScript的jQuery库中ready方法的学习教程,包括ready的相关简短写法,rally cool,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jquery判断input值不为空的方法的相关资料,需要的朋友可以参考下2016-06-06
包装集总是面向集合的，需要的朋友可以参考下。2009-12-12
这篇文章主要介绍了jQuery中ajax的post()方法用法,以实例形式较为详细的分析了post()方法的功能、参数及使用技巧,需要的朋友可以参考下2014-12-12
下面小编就为大家带来一篇jquery层级选择器(匹配父元素下的子元素实现代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
Prop和attr的作用类似，相同点：两者都可以获取属性值和设置属性值，下面为大家介绍下具体的使用2013-12-12
最新评论