|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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("");
$("tr:last > td > #address").val("");
});
$(".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>
|
上面你的代码实现添加或者删除行的功能，下面介绍一下它的实现过程。
一.代码注释：
（1）.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$("#addOneRow").click(function(){})，为添加按钮注册click事件处理函数。
（3）.var tempTr=$("tr:first").clone(true)，克隆第一行的数据，采用深度克隆，具体可以参阅下面的相关阅读。
（4）.$("tr:last").after(tempTr)，在最后一行插入克隆的行。
（5）.$("tr:last > td > #name").val("")，将最后一个tr行的用户名文本框的值设置为空，其实就是讲新添加的行的文本框的内容设置为空，因为上面采用的是深度拷贝，否则会将数据一起拷贝过来。
（6）.$("tr:last > td > #address").val("")，和上面是一样的道理。
（7）.$(".delOneRow").click(function() { })，为删除按钮注册click事件处理函数。
（8）.if ($("tr").length < 2) { alert("至少保留一行!"); } ，如果行数只剩下一行，那么就会弹出提示。
（8）.else{ if (confirm("确认删除?")) {$(this).parent().parent().remove();}}，点击删除的时候弹出确认框，这样的话会将当前删除按钮的父元素的父元素删除，其实就是tr删除。
二.相关阅读：
（1）.:first选择器参阅jQuery :first一章节。
（2）.clone()方法参阅jQuery clone()一章节。
（3）.after()方法参阅jQuery after()一章节。
（4）.parent()方法参阅jQuery parent()一章节。
（4）.remove()方法参阅jQuery remove()一章节。
原文地址：https://www.cnblogs.com/zhuyeshen/p/11433750.html
时间： 2024-11-13 08:10:32
