Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
最近做的项目中有一个需求就是要求在线填写表格内容时，不够的话可以动态添加一行，我这里用的jQuery来实现，下面是我项目截图展现：
当点击“添加输入框”按钮时，就会自动添加一行
下面我们来一下代码实现（把实际项目中的HTML代码简化了，其他功能可自己加）
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet">
<script src=".10.2/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<style type="text/css">
table.table input{ /*可输入区域样式*/
width:100%;
height: 100%;
border:none; /* 输入框不要边框 */
font-family:Arial;
}
</style>
</head>
<body>
<br><br>
<center><h3>Jquery实现表格动态增加一行，删除一行</h3></center>
<table class="table" border="1" align="center">
<thead>
<tr>
<th>序号</th>
<th>配置要求</th>
<th>主要技术参数</th>
</tr>
</thead>
<tbody>
<tr id="clo">
<td class="td">1</td>
<td> <input placeholder="添加配置要求" /></td>
<td> <input placeholder="添加主要技术参数" /></td>
</tr>
<tr>
<td class="td">2</td>
<td> <input placeholder="添加配置要求" /></td>
<td> <input placeholder="添加主要技术参数" /></td>
</tr>
</tbody>
</table>
<button onclick="fun()">增加一行</button>
<button onclick="del()">删除一行</button>
<script type="text/javascript">
//前面的序号1,2,3......
var i = 1;
$(".td").each(function(){
$(this).html(i++);
})
//添加一行
function fun(){
var $td = $("#clo").clone(); //增加一行,克隆第一个对象
$(".table").append($td);
var i = 1;
$(".td").each(function(){ //增加一行后重新更新序号1,2,3......
$(this).html(i++);
})
$("table tr:last").find(":input").val(''); //将尾行元素克隆来的保存的值清空
}
//删除一行
function del(){
$("table tr:not(:first):not(:first):last").remove();//移除最后一行,并且保留前两行
}
</script>
</body>
</html>该代码的截图：
简单易于理解，这里不做其他解说了
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent 删除表格对象配置jquerytable