欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jquery动态添加删除一行数据示例

时间:2021-02-10 14:51:07|栏目:jquery|点击:
复制代码 代码如下:

<html>
<head>
<title>添加、删除一行</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$("#addOneRow").click(function() {
var tempTr = $("tr:first").clone(true);
$("tr:last").after(tempTr);
$("tr:last > td > #name").val("");//新添加行name为空
$("tr:last > td > #address").val("");//新添加行address为空
});
$(".delOneRow").click(function() {
if ($("tr").length < 2) {
alert("至少保留一行!");
} else {
if (confirm("确认删除?")) {
$(this).parent().parent().remove();
}
}
});
});
</script>
</head>

<body>
<table border="1">
<tr>
<td>姓名:</td>
<td><input type="text" id="name" name="name" />
</td>
<td>地址:</td>
<td><input type="text" id="address" name="address" /></td>
<td><input type="button" class="delOneRow" value="删除" /></td>
</tr>
</table>
<input type="button" id="addOneRow" value="添加一行" />
</body>

</html>

上一篇:jQuery事件绑定与解除绑定实现方法

栏    目:jquery

下一篇:EasyUI,点击开启编辑框,并且编辑框获得焦点的方法

本文标题:jquery动态添加删除一行数据示例

本文地址:http://www.codeinn.net/misctech/60523.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有