硬泡|前端实现动态生成表格，是蒸的C 前端实用小demo|前端|javascript

个人简介

作者简介：大家好，我是阿牛，全栈领域新星创作者。
个人主页：馆主阿牛
支持我：点赞+收藏??+留言
系列专栏：硬泡 javascript
格言：迄今所有人生都大写着失败，但不妨碍我继续向前！

文章图片

上期传送门：
初识 JavaScript（揭开javascript的神秘面纱）
javascript中的数据类型
javascript中的数据类型转换
javascript 基础案例（循环）
面试官最爱考的 javascript 预解析，你搞明白了吗？
“撩过”c++的对象，“拿捏”了python的对象，你还怕拿不下javascript的对象吗？
javascript 内置对象Math总结及其案例
javascript 内置对象Date总结及案例
解锁前端密码框常见功能做法

这里写目录标题

- 个人简介
前言
- ??案例分析
- ??代码
- ??动图演示
结语

前言动态生成表格是前端开发中非常重要的内容，常常是后端返回数据（大多是json类型），我们前端通过js循环来动态添加，所以这部分内容是十分重要的，今天我就来写写这部分内容，其实也很简单的，仔细看哦！！！
??案例分析

因为里面的学生数据都是动态的，我们需要 js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。

所有的数据都是放到 tbody 里面的行里面。

因为行很多，我们需要循环创建多个行（对应多少人）。

??代码

Document > 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: skyblue; } tr:hover{ cursor: default; background-color: pink; } a:hover{ cursor: pointer; } 姓名科目成绩操作 > //动态生成表格 //data是模拟的后台传来的数据 var data = https://www.it610.com/article/[ {"name" :"我是阿牛", "class":"javascript", "grade": 100 }, { "name" :"别搞我啊", "class":"javascript", "grade": 99 }, { "name" :"我不懂细节", "class":"javascript", "grade": 98 }, { "name" :"她说不合适", "class":"javascript", "grade": 96 }, { "name" :"神明也无光", "class":"javascript", "grade": 95 } ]; var tbody = document.querySelector('tbody'); for(var i=0; i