js文件
$(
function() {
function tt() {
$(this).parent().parent().remove();
}
/**
* 文档处理
*/
/*将内容添加到p标签内部的文档前面*/
//前面的20为索引,是添加到内容前面的。
//且我们要往内容前面添加的内容,在索引之后,
//原内容之前。
//$("p").prepend(20,"<b>asdfghjkl</b>");
/*将内容添加到p标签内部的文档后面面*/
//$("p").append("<b>asdfghjkl</b>");
/*将内容添加到p标签外部的前面*/
//$("p").before("<b>asdfghjkl</b>");
/*将内容添加到p标签外部的后面*/
//$("p").after("<b>asdfghjkl</b>");
/*将p标记替换成要替换的内容*/
//$("<b>asdfghjkl</b>").replaceAll("p");
/*
* 4.jquery第四种用法:创建DOM的jquery对象
*/
//用字符串创建jquery对象:
//追加表格也可用该种方法。
//这里我们要注意,p是p变量,"p"是p标签。
//var p=$("<p>asdfghjkl</p>");
//$("p").append(p);
/**
* 下表单的添加和删除
* /
/*创建table对象*/
//该方法为推荐写法
var table = $("<table border='1'></table>");
/*创建表头*/
var tr1 = $("<tr></tr>");
table.append(tr1);
/*创建表头内容*/
for(var i = 0; i < 4; i++) {
var td = $("<th>标题" + i + "</th>");
//判断是不是最后一列,
//如果是最后一列,则将其内容替换成"操作"。
if(i == 3) {
td.html("操作");
}
//追加了四列
tr1.append(td);
}
/*创建主要内容表行*/
for(var i = 0; i < 4; i++) {
var tr = $("<tr></tr>");
for(var j = 0; j < 4; j++) {
var td = $("<th>内容" + i + j + "</th>");
//判断是不是最后一列,
//如果是最后一列,则将其内容替换成"删除"。
if(j == 3) {
td.html("<a href='#'>删除</a>");
}
//追加了四列
tr.append(td);
}
//每次循环完了,我们还要将表行添加到table里头。
table.append(tr);
}
//这里我们再用id选择器,将table添加到div里
$("#tab1").append(table);
/*创建添加按钮、事件*/
$("button").click(
function() {
//外边创建了table对象,
//我们在这里就只需单击即可。
var tr = $("<tr></tr>");
for(var j = 0; j < 4; j++) {
var td = $("<td>内容" + i + j + "</td>");
if(j == 3) {
var aa = $("<a href='#'>删除</a>");
aa.click(tt);
td.html(aa);
}
tr.append(td);
}
table.append(tr);
}
);
/*创建删除事件*/
//我们要删除并不是a标签,a标签代表的是"删除"字样。
//而我们要删除的是a标签所在td的父标签,
//也就是要删除a标签的父标签的父标签。
//$("a").click(
// function(){
// $(this).parent().parent().remove();
// }
//);
$("a").click(tt);
}
);
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery下表单的添加和删除</title>
<script type="text/javascript" src="../js/jQuery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/js3.js">
</script>
</head>
<body>
<button>添加</button>
<div id="tab1"></div>
<p>Hello World!</p>
</body>
</html>
文档处理
将内容添加到p标签内部的文档前面
将内容添加到p标签内部的文档后面面
将内容添加到p标签外部的前面
将内容添加到p标签外部的后面
将p标记替换成要替换的内容
下表单的添加和删除
添加行
删除行