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

142 阅读 0 评论 94 点赞

我是靠谱客的博主敏感大米，最近开发中收集的这篇文章主要介绍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> 