j-script a simple code to add and delete tables

Insert image description here
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#sss{
				margin: 0 auto;
				border: 5px solid #7FFFD4;
				width: 300px;
				height: 300px;
				
			}
			#in{
				height: 80px;
				width: 298px;
				border: 1px solid deepskyblue;
				margin-bottom: 10px;
				margin: 0 auto;
				
				
			}
			#inpu{
				float: left;
				
			}
			#submission{
				
				
				
				
			}
			body{
				text-align: center;
				
			}
		</style>
		<script>
			
			window.onload=function(){
				
				function on(){    //点击删除的事件
				var tr=this.parentNode.parentNode;//获取到tr节点
				
				//var td=tr.getElementsByTagName("td")[0].innerHTML;//获取要删除的名字
				var td=tr.children[0].innerHTML;//childeren遍历类名,获取tr第一个的td名字
				var con=confirm("确认删除【"+td+"】英雄嘛")//confirm是否删除,会提示出2个按钮,确定和取消
				
				if(con){
					tr.parentNode.removeChild(tr);//用tr的父节点来删除tr
				}
					
				return false;//取消超链接的默认行为,不然会出现跳转
				}
				
				
				var onc=document.getElementsByTagName("a");  //获取a类名
				for(i=0;i<onc.length;i++){     //用循环给每个按钮添加一个删除的事件
					onc[i].onclick=on;
				}
				
				var submission=document.getElementById("submission");//获取提交 按钮 
				submission.onclick=function(){
					var te=document.getElementsByTagName("input"); //获取输入框的值
					var tr=document.createElement("tr");  //创建一个tr节点
					
					
					//把input的值写到一个创建的tr中
					/* for(var i=0;i<te.length;i++){//这是第一种方法，也是我自己写的，用循环来输进去
						
						var td=document.createElement("td");  //创建一个td节点
						
						var td2=document.createTextNode(te[i].value)  //循环的把value的值给td2
						
						td.appendChild(td2)// 把td2添加到td中
						tr.appendChild(td);//把td添加到tr中
						
						//添加删除点击
						
						
					} */


					//把input的值写到一个创建的tr中
					tr.innerHTML="<td>"+te[0].value+"</td>"+//这个是看视频写的,简单明了,修改度高
					              "<td>"+te[1].value+"</td>"+
								  "<td>"+te[2].value+"</td>"//也可以吧删除操作直接添加,不过我下面写了就算了
								 
					
					
					
					var a=document.createElement("a"); //创建一个a节点
					a.href="";//给a节点添加一个href,点击按钮一样
					a.onclick=on;//给创建的a添加一个点击删除事件
				    var  text1=document.createTextNode("删除") //创建一个删除的文本节点
					a.appendChild(text1)//把删除的文本节点给刚创建的a节点
					var td3=document.createElement("td");//创建一个td节点
					td3.appendChild(a);//把a给td节点
					tr.appendChild(td3);//把td节点给tr
					
					var employeeTable=document.getElementById("employeeTable")//获取employeeTable
					var tbody =document.getElementsByTagName("tbody")[0];//把上面的给tbody,因为游览器会默认创建一个tbody
					//var tab=document.getElementById("tab");
					tbody.appendChild(tr);  //把上面创建的tr加到tbody中,就是用来的table
				}

			}
		</script>
	</head>
	
	<body>
		<div id="sss">
			<table id="tab" border="2px" bordercolor="red" width="300px"  align="center">
				
					<th>英雄名字</th>
					<th>等级</th>
					<th>年龄</th>
					<th>操作</th>
				
				<tr >
					<td>德玛西亚</td>
					<td>10</td>
					<td>33</td>
					<td><a href="">删除</a></td>
				</tr>
				<tr >
					<td>剑豪</td>
					<td>13</td>
					<td>23</td>
					<td><a href="">删除</a></td>
				</tr>
				<tr >
					<td>小娜</td>
					<td>18</td>
					<td>18</td>
					<td><a href="">删除</a></td>
				</tr>
			</table>
				
			
		</div>
		<div id="in">
			<div id="inpu">
				<form>
					名字<input type="text" /><br>
					等级<input type="text" /><br>
					年龄<input type="text" />
				</form>
			</div>
			<div id="submission"><button>提交</button></div>
			
		</div>
	</body>
</html>
It's only one month until graduation.
Adding and deleting is just using code to create and add. It’s simple.
You can also use innerHTML+= to add "<html code>" directly;
I am Mr. Bai, the amazing Bai!
j-script a simple code to add and delete tables

Guess you like
