表格的新增以及和删除一行数据（可以新增原有数据）

最新推荐文章于 2024-11-01 21:43:04 发布

云非云额

最新推荐文章于 2024-11-01 21:43:04 发布

阅读量1.2k

点赞数

分类专栏：前端H5 文章标签：表格新增删除一条数据新增一条数据

本文链接：https://blog.youkuaiyun.com/duan199404/article/details/72744948

版权

前端H5 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现HTML表格的动态操作，包括在表格最后一行之后新增一行数据，以及删除表格中的一条数据。通过示例代码演示了如何复制表格内部内容进行新增。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>添加、删除一行</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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" class="name" name="name" />
</td>
<td>地址:</td>
<td><input type="text" class="address" name="address" /></td>
<td><input type="button" class="delOneRow" value="删除" /></td>
</tr>
</table>
<input type="button" id="addOneRow" value="添加一行" />
</body>

</html>