DOM操作-表格的动态实现添加删除

通过点击创建的BUTTON按钮实现添加和删除的功能

<style type="text/css">
			p{
				text-align: center;
			}
			button{
				width: 150px;
			}
			td{
				height: 50px;
				text-align: center;
			}
			span{
				color: white;
				font-size: 14px;
				cursor: pointer;
				padding: 5px;
				margin-left: 15px;
			}
			span:nth-of-type(1){
				background-color: darkblue;
			}
			span:nth-of-type(2){
				background-color: darkorange;
			}
			span:hover{
				opacity:0.5;
			}

创建两个BUTTON按扭负责添加删除
创建表格

<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>
		</table>
		

js实现添加删除，设置删除从最后一行元素删

<script type="text/javascript">
			//找到表格
			let tabNode=document.getElementsByTagName("table")[0];
			//找到两个按钮绑定事件
			let btns=document.getElementsByTagName("button");
			
			//模拟后台返回的数据
			let userOrders = {
				"code":200,
				"msg":"success",
				"data":[
					{"id":2,"username":"墨菲特","sex":"男"},
					{"id":1,"username":"盖伦","sex":"男"}
				]
			}
			
			//添加元素
			btns[0].onclick=function(){
				for(let i=0;i<userOrders.data.length;i++){
				//创建行元素及列元素
				let trNode=document.createElement("tr");
				let tdNode01=document.createElement("td");
				let tdNode02=document.createElement("td");
				let tdNode03=document.createElement("td");
				let tdNode04=document.createElement("td");
				
				//给列元素赋值
				tdNode01.innerHTML=userOrders.data[i].id;
				tdNode02.innerHTML=userOrders.data[i].uname;
				tdNode03.innerHTML=userOrders.data[i].sex;
				
				//创建操作栏中的标签
				let spanNode=document.createElement("span");
				let spanNode2=document.createElement("span");
				//添加内容
				spanNode.innerHTML="编辑";
				spanNode2.innerHTML="删除";
				
				//将操作用的两个标签添加到操作栏中
				tdNode04.appendChild(spanNode);
				tdNode04.appendChild(spanNode2);
				
				//将列添加到行中
				trNode.appendChild(tdNode01);
				trNode.appendChild(tdNode02);
				trNode.appendChild(tdNode03);
				trNode.appendChild(tdNode04);
				
				//将行添加到表格中
				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>