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

一时语塞
还是先看效果吧

简单来说就是通过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: '小学三年级',
      detail: [{
        Id: 11,
        className: '1班',
        num: 49
      }, {
        Id: 12,
        className: '2班',
        num: 52
      }, {
        Id: 13,
        className: '3班',
        num: 48
    }, {
        Id: 14,
        className: '4班',
        num: 50
      }, {
        Id: 15,
        className: '5班',
        num: 51
      }]
    }]
  }, {
    courseName: '数学',
    detail: [{
      grade: '小学一年级',
      detail: [{
        Id: 16,
        className: '1班',
        num: 50
      }, {
        Id: 17,
        className: '2班',
        num: 48
      }, {
        Id: 18,
        className: '3班',
        num: 51
    }, {
        Id: 19,
        className: '4班',
        num: 49
      }, {
        Id: 20,
        className: '5班',
        num: 52
      }]
    }, {
      grade: '小学二年级',
      detail: [{
        Id: 21,
        className: '1班',
        num: 45
      }, {
        Id: 22,
        className: '2班',
        num: 53
      }, {
        Id: 23,
        className: '3班',
        num: 50
    }, {
        Id: 24,
        className: '4班',
        num: 48
      }, {
        Id: 25,
        className: '5班',
        num: 49
      }]
    }, {
      grade: '小学三年级',
      detail: [{
        Id: 26,
        className: '1班',
        num: 49
      }, {
        Id: 27,
        className: '2班',
        num: 52
      }, {
        Id: 28,
        className: '3班',
        num: 48
    }, {
        Id: 29,
        className: '4班',
        num: 50
      }, {
        Id: 30,
        className: '5班',
        num: 51
      }]
    }]
  }
]

这么长的一段数据
应该多少感觉到它的难度了吧！ (╯‵□′)╯︵┻━┻ （手动笑哭）

这个数据结构大概是这样的：
接下来要步入正题了：

首先，先写个div用来放这个表格

<div id="table"></div>

然后，渲染

// 先找到这个div元素
let container = document.getElementById('table')
// 开始遍历list数组
for (let a of list) {
  // 写好表头部分
  let tr = `<table border="1" cellspacing="0"><tr>` +
          `<th>科目</th>` +
          `<th>年级</th>` +
          `<th>班级</th>` +
          `<th>人数</th>`
  // ↓ 这里的n是记当前年级下有几个班级，在合并行的时候会用到
  let n
  a.detail.forEach(item => {
    n = item.detail.length
  })
  // ↑------
  // 在表头后面拼接一个tr
  tr += `<tr>`
  // 渲染科目这一列 （合并的行数 rowspan = 当前年级数 * 当前年级下的班级数）
  tr += `<td rowspan="${a.detail.length * n}">${a.courseName}</td>`  // 科目
  // 遍历 当前科目下的年级
  for (let b of a.detail) { 
  	// 渲染年级这一列 （合并的行数 = 当前年级下的班级数）
    tr += `<td rowspan="${b.detail.length}">${b.grade}</td>` // 年级
    // 遍历班级
    for (let c of b.detail) {
      // 渲染班级名称
      tr += `<td>${c.className}</td>`
      // 渲染班级人数 (这里加了Id，用于后面点击修改功能)
      tr += `<td id="${c.Id}">${c.num}</td>`  
      // 别忘了加上tr的结束标签（因为班级人数是一行的最后一列，所以就加在这里）
      tr += `</tr>`
    }
  }
  // 最后拼上结束标签 （记得一定要用+= 不然循环只会把循环的最后一次的数据赋给container）
  container.innerHTML += tr + `</table>`

  // 这里是点击单元格进行修改

  // 先获取所有td
  let td = document.querySelectorAll('td')
  // 遍历td
  for (let i of td) {
    // 判断有没有id （也就是判断这个单元格是否需要修改）
    if (i.getAttribute('id')) {
      // 有id就加个样式：鼠标移上变小手
      i.style.cursor = 'pointer'
      // 添加点击事件
      i.onclick = function (e) {
        // 这里用prompt对话框
        let edit
        // 把当前td中的值赋给prompt
        edit = prompt('修改', this.innerHTML)
        // 判断如果点击确定
        if (edit) {
          // 把prompt中的值赋回td
          this.innerHTML = edit
        }
      }
    }
  }
}

最后给个样式吧

#table {
  display: flex;
  flex-wrap: nowrap;
}
table {
  width: 350px;
  flex-shrink:0;
  color: #666;
  font-size: 15px;
  margin-right:10px;
  text-align: center;
  border:1px solid #ccc;
  border-collapse: collapse; /* 合并边框 */
}
tr {
  height: 35px;
}
/* 表头 */
th {
  background: #f2f2f2;
}
/* 年级这一列 */
table td:nth-child(2) {
  width: 90px;
}
/* 需要修改的列（这里是 人数） */
table td:last-child {
  background: #fcfcfc;
}

放一张用以上数据渲染出来的表格

Ending…

---

• 关于flex-shrink
  指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
  注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

---

老规矩

不喜勿喷！
不喜勿喷！
不喜勿喷！