原生js实现动态数据表格

路过的假面骑士dcd

已于 2022-07-07 17:22:32 修改

阅读量2.9k

点赞数 3

分类专栏： js 文章标签： javascript 前端 js

于 2022-04-22 17:31:21 首次发布

本文链接：https://blog.csdn.net/wsdshdhdhd/article/details/124350148

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

动态生成表格是前端开发非常基础且重要的功能，大多数是后端返回数据（json类型），前端通过js循环来动态添加，所以这部分内容是十分重要的，功能其实肥肠简单，话不多数上代码。

先来看看头部组成：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>

HTML部分：

<table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

再来看css部分：

<style>
			table {
				width: 400px;
				border-collapse: collapse;
				margin: 100px auto;
				border: 1px solid #888;
				text-align: center;
			}

			th,td {
				border: 1px solid #888;
				padding: 5px 0px;
			}

			th {
				background-color: #1DC797;
			}

			tr:hover {
				cursor: default;
				background-color: seagreen;
			}

			a:hover {
				cursor: pointer;
			}
</style>

js部分：

<script>
			//动态生成表格
			//data是模拟的后台传来的数据
			var data = [{
					"name": "我是老八",
					"class": "css",
					"grade": 100
				},
				{
					"name": "还是我啊",
					"class": "html",
					"grade": 99
				},
				{
					"name": "门矢士",
					"class": "vue",
					"grade": 98
				},
				{
					"name": "上杉绘梨衣",
					"class": "javascript",
					"grade": 96
				},
				{
					"name": "蔡徐坤",
					"class": "php",
					"grade": 95
				}
			];
			//获取table全部
			var tbody = document.querySelector('tbody');
			console.log(tbody);
			//循环输出数据
			for (var i = 0; i < data.length; i++) {
				var tr = document.createElement('tr');
				//创建的tr插入table里
				tbody.appendChild(tr);
				//for in 遍历data数组
				for (var k in data[i]) {
					var td = document.createElement('td');
					//给td加上内容
					td.innerHTML = data[i][k];
					//创建的td插入tr里
					tr.appendChild(td);
				}
				//创建删除的单元格
				var td = document.createElement('td');
				td.innerHTML = '<a style="color:red;">' + '删除' + '</a>';
				tr.appendChild(td);
			}
			//实现点击删除两字删除对应的行
			var dele = document.querySelectorAll('a');
			for (var i = 0; i < dele.length; i++) {
				dele[i].onclick = function() {
					tbody.removeChild(this.parentNode.parentNode);
				}
			}
		</script>

基础的功能就是这样，肥肠容易理解。

文章仅限参考如有错误请及时指出或补充大家一起努力加油！