JavaScript 动态创建表格，可删除整行！快去学起来~

最新推荐文章于 2023-04-03 21:45:25 发布

大可爱学编程ฅ´ω`ฅ

最新推荐文章于 2023-04-03 21:45:25 发布

阅读量1.7k

点赞数 5

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44761243/article/details/109022966

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

正常的创建表格的思路是：html 里面，<table><tr><td>这样，一个一个去输入，如果你要创建 1000 行的表格（这个可能的，比如学校录入学生信息的时候，我找半天才找到自己在3324行。），并且每行内容不一样的话，活生生把宝宝累垮掉啊，特别麻烦。万一你再报错的话，结果我想你是猜到的，下面我来给大家介绍一下，如何快速简单的创建表格~~~

1.创建标题行

首先，咱先设置一些表格的边框，字体对齐，简单的设置一下。再定义一个 div 的容器，用来存表格，取个类名 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>

此处 border-collapse: collapse; 没有这行代码和有这行代码的区别，请看图，自行理解，文字我解释不来＞︿＜：

我们的第一步，效果图就是有这行代码的这个。注意是 js 代码加上的效果哈，别忘了加下面的 js 才能看到上图效果。

js 的代码如下：

	<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.创建表格的内容

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

如下是效果图：

3.创建链接，点击删除整行

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

下图是效果图：鼠标经过哪一行哪一行变粉哦~