【web前端(四十一)】javascript_jquery_文档处理、下表单的添加和删除

最新推荐文章于 2024-05-04 02:42:40 发布

原创最新推荐文章于 2024-05-04 02:42:40 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

118 篇文章

订阅专栏

本文详细介绍使用jQuery实现网页表单的动态添加和删除功能，包括创建和操作DOM元素、事件绑定等关键技术点，适用于前端开发人员提升网页交互体验。

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>