【web前端(四十一)】javascript_jquery_文档处理、下表单的添加和删除
2023-09-11 14:20:37 时间
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标记替换成要替换的内容
下表单的添加和删除
添加行
删除行
相关文章
- jquery $.proxy使用 Jquery实现ready()的源码
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 【JavaScript】JS中暂停几秒再往下执行!
- JavaScript、jQuery实现“社区便利店收银系统”(1+X Web前端开发初级 例题)
- 26dwr - DWR中的JavaScript(创造一个与 Java 对象匹配的 Javascript 对象)
- JavaScript 9. 数据类型
- JavaScript - 自动下载接口返回的文件流
- 【JavaScript】重温Javascript继承机制
- 2020年javascript+jquery-视频教程_PHP新课程体系
- jQuery基础与JavaScript与CSS交互-第五章
- 《编写可维护的JavaScript》——1.5 空行
- 《JavaScript设计模式》——2.2 包装明星——封装
- 《JavaScript核心概念及实践》——2.3 运算符
- Javascript配合jQuery实现流畅的前端验证
- Jquery获取html参数, jquery.params.js 获取参数
- javascript: Jquery each loop with json array or object
- JavaScript正则表达式进阶指南
- 2018年你需要知道的13个JavaScript工具库
- javascript jquery 推断对象为空的方式
- Effective JavaScript Item 31 优先使用Object.getPrototypeOf,而不是__proto__
- 记录下项目中常用到的JavaScript/JQuery代码一(大量实例)