通过多层嵌套数据渲染表格

最新推荐文章于 2024-03-03 20:39:21 发布

原创

最新推荐文章于 2024-03-03 20:39:21 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #javascript

该文章已生成可运行项目，

一时语塞
还是先看效果吧
效果图
简单来说就是通过html和js渲染出以上效果
这道题的难点应该是，根据以下数据渲染出这个表格吧

let list = [{
   
   
    courseName: '语文',
    detail: [{
   
   
      grade: '小学一年级',
      detail: [{
   
   
        Id: 1,
        className: '1班',
        num: 50
      }, {
   
   
        Id: 2,
        className: '2班',
        num: 48
      }, {
   
   
        Id: 3,
        className: '3班',
        num: 51
    }, {
   
   
        Id: 4,
        className: '4班',
        num: 49
      }, {
   
   
        Id: 5,
        className: '5班',
        num: 52
      }]
    }, {
   
   
      grade: '小学二年级',
      detail: [{
   
   
        Id: 6,
        className: '1班',
        num: 45
      }, {
   
   
        Id: 7,
        className: '2班',
        num: 53
      }, {
   
   
        Id: 8,
        className: '3班',
        num: 50
    }, {
   
   
        Id: 9,
        className: '4班',
        num: 48
      }, {
   
   
        Id: 10,
        className: '5班',
        num: 49
      }]
    }, {
   
   
      grade:<