jquery动态添加删除一行数据示例_Javascript教程-查字典教程网
jquery动态添加删除一行数据示例
jquery动态添加删除一行数据示例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:添加、删除一行$(function(){$("#addOneRow").click(function(){vartempT...

复制代码 代码如下:

<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" value="删除" /></td>

</tr>

</table>

<input type="button" id="addOneRow" value="添加一行" />

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类