js中的动态创建删除案例(简单)和JQ中表格+json动态实现(简化代码版)

最新推荐文章于 2022-08-22 08:33:46 发布

我们一起走过的岁月

最新推荐文章于 2022-08-22 08:33:46 发布

阅读量207

点赞数 1

本文链接：https://blog.csdn.net/HeDashuaithan/article/details/111705500

版权

js中动态表格创建和删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格动态创建删除</title>
		<style>
			p{
				text-align: center;
			}
			button{
				width: 120px;
			}
			td{
				height: 35px;
				text-align: center;
			}
			span{
				color: white;
				font-size: 14px;
				cursor: pointer;
				padding: 5px;
				margin-left: 15px;
			}
			span:nth-of-type(1){
				background-color: darkcyan;
			}
			span:nth-of-type(2){
				background-color: darkorange;
			}
			
			span:hover{
				opacity: 0.7;
			}
			
		</style>
	</head>
	<body>
		<p>
			<button>create Element</button>
			<button>delete Element</button>
		</p>
		<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%" align="center">
			
			<thead>
				<tr>
					<th>用户编号</th>
					<th>用户姓名</th>
					<th>用户性别</th>
					<th>操作方式</th>
				</tr>
			</thead>
			<script>
				let tabNode=document.getElementsByTagName("table")[0];
				// 找到两个按钮绑定事件
				let btns=document.getElementsByTagName("button");
				
				let index=1000;
				let id=tabNode.id;
				console.log(id);
				
				// 添加元素
				btns[0].onclick=function(){
					
						// 创建行元素及列元素
						let trNode=document.createElement("tr");
						let tdNode1=document.createElement("td");
						let tdNode2=document.createElement("td");
						let tdNode3=document.createElement("td");
						let tdNode4=document.createElement("td");
						
						// 给列元素赋值
						tdNode1.innerHTML=++index;
						tdNode2.innerHTML="蔡文姬";
						tdNode3.innerHTML="120";
						
						// 创建操作栏中的标签
						let spanNode=document.createElement("span");
						let spanNode2=document.createElement("span");
						spanNode.innerHTML="编辑";
						spanNode2.innerHTML="删除";
						
						// 将操作用的两个标签天极爱到操作栏中
						tdNode4.appendChild(spanNode);
						tdNode4.appendChild(spanNode2);
						
						// 将列添加到行中
						trNode.appendChild(tdNode1);
						trNode.appendChild(tdNode2);
						trNode.appendChild(tdNode3);
						trNode.appendChild(tdNode4);
						
						
						// 将行元素添加到表格中
						tabNode.appendChild(trNode);
					
				}
				// 删除元素
				btns[1].onclick=function(){
					// 删除 remove() removeChild()通过父元素删除;
					// 找到全部的tr节点，删整行
					let trNodes=document.getElementsByTagName("tr");
					// 找到最后一个tr节点
					let lastTrNode=trNodes[trNodes.length-1];
					// lastTrNode.remove();
					tabNode.removeChild(lastTrNode);
				}
			</script>
		</table>
	</body>
</html>

JQ中表格和json动态实现(在js的基础上简化了代码)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ表格+json动态实现</title>
		<style>
			p{
				text-align: center;
			}
			button{
				width: 120px;
			}
			td{
				height: 35px;
				text-align: center;
			}
			span{
				color: white;
				font-size: 14px;
				cursor: pointer;
				padding: 5px;
				margin-left: 15px;
			}
			span:nth-of-type(1){
				background-color: darkcyan;
			}
			span:nth-of-type(2){
				background-color: darkorange;
			}
			
			span:hover{
				opacity: 0.7;
			}
			</style>
	</head>
	<body>
			<p><button>create Element</button></p>
			<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%" align="center">
				<thead>
					<tr>
						<th>用户编号</th>
						<th>用户姓名</th>
						<th>用户性别</th>
						<th>操作方式</th>
					</tr>
				</thead>
			</table>
			<script src="./js/jquery-3.1.1.js"></script>
			<script type="text/javascript">
				// 模拟后台返回的数据
				let userOders={
					"code":200,
					"msg":"success",
					"data":[
						{"id":2,"username":"王晨阳","sex":"男"},
						{"id":1,"username":"何沛文","sex":"男"}
					]
				}
				$('button:eq(0)').click(function(){
					$.each(userOders.data,function(index,json){
						// 向table中添加行及列
						$('table').append("<tr><td>"+json.id+"</td><td>"+json.username+"</td><td>"+json.sex+"</td><td><span>编辑</span><span>删除</span></td></tr>");
					})
				})
				$('table').on('click','span',function(){
					$(this).parent().parent().remove();
				})
			</script>
	</body>
</html>