JavaScript dynamically creates a table, you can delete entire rows! Hurry up and learn~

Foreword:

The normal way to create a table is: in html, <table><tr><td>, so enter one by one. If you want to create a table with 1000 rows (this is possible, for example, when the school enters student information, I find It took a long time to find myself in line 3324.) And if the content of each line is different, it will be very troublesome for the baby to be exhausted. In case you report an error again, I think you guessed it, let me introduce to you how to create a table quickly and easily~~~

1. Create a header row

First, let's set some table borders, font alignment, and simple settings. Define a div container to store the table, and take a class name box.

		<style>
			/* 给表格增加红色的框框 */
			table,tr,td{
				border: 1px solid red;
				text-align: center;
			}
			table{
				width: 400px;
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>

Here border-collapse: collapse; There is no difference between this line of code and this line of code. Please see the picture and understand by yourself. I can’t explain the text.>︿<:

Our first step, the rendering is the one with this line of code. Pay attention to the effect of js code, don’t forget to add the following js to see the effect of the above picture.

The code of js is as follows:

	<script type="text/javascript">
		var box = document.querySelector(".box");
		//1.创建 table  添加到我们的 box 里面
		 var table = document.createElement("table");
		 box.appendChild(table);
		 //2.创建 thead 添加到table 
		 var thead = document.createElement("thead");
		 table.appendChild(thead)
		 //3.创建 tr 添加到 theaed 
		 var tr = document.createElement("tr");
		 thead.appendChild(tr);
        //4.将标题行的内容扔进数组里 for 循环遍历放到表格里
		var arr = ["姓名","年龄","性别","操作"];
		for(var i=0; i<arr.length;i++){
			var td = document.createElement("td");
			td.innerHTML = arr[i];
			tr.appendChild(td);
		}
    </script>

2. Create the content of the table

<script type="text/javascript">
        //创建 tbody 
		var tbody = document.createElement("tbody");
		table.appendChild(tbody);
        //随便输入点内容进去啦
		var datas = [{
			name:"小红",
			sex:"女",
			age:20
		},{
			name:"小蓝",
			sex:"男",
			age:22
		},{
			name:"小粉",
			sex:"女",
			age:23
		},{
			name:"小绿",
			sex:"男",
			age:21
		},{
			name:"小紫",
			sex:"女",
			age:23
		}]
		for (var i=0;i < datas.length;i++){
			var tr = document.createElement("tr");
			tbody.appendChild(tr);
			//datas[i] 等价于数组中的每一个对象，需要创建循环
			for (var k in datas[i]){
				var td = document.createElement("td");
				td.innerHTML = datas[i][k];
				tr.appendChild(td);
			}
			var td = document.createElement("td");
			tr.appendChild(td);
		}
</script>

The following is the rendering:

3. Create a link, click to delete the entire row

<script type="text/javascript">
    //创建链接
   	var a = document.createElement("a");
   	a.href = "#";
   	a.innerHTML = "删除";
   	td.appendChild(a);
   	a.onclick = function(){
   		this.parentNode.parentNode.remove();
   	}
       //鼠标滑动的效果是热情粉色背景
   	tr.onmouseover = function(){
   		this.style.backgroundColor = "hotpink";
   	}
       //鼠标移走，没有粉色背景啦
   	tr.onmouseout = function(){
   		this.style.backgroundColor = ""
   	}
</script>

The following picture is the effect picture: which line the mouse passes over which line turns pink~

Then we try to delete the little green and take a look, the effect after clicking delete is:

Let me show you the code of the entire page. You can try it. I sent it to the resource. The name is js form. Go and try it for yourself~

Reprinting without permission is forbidden~ Don’t copy, please cheer yourself ฅʕ•̫͡•ʔฅ