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

前端技术 2023/09/04 JavaScript
复制代码 代码如下:

<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>

本文地址：https://www.stayed.cn/item/9768

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案