合并表格行---三层for循环遍历数据
示例1 json
<!DOCTYPE html>
<html lang="zh_cn">
<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>Document</title>
</head>
<body>
<table width="100%">
<thead>
<tr>
<th>
<div>学期</div>
</th>
<th>
<div>课程类型</div>
</th>
<th>
<div>课程名称</div>
</th>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let semesterList = [{ "courseTypeList": [{ "courseTypeName": "专业基础课", "courseList": [{ "courseName": "产品方法论", "scoreStatus": "1", "ptcId": "ff8080815f71bee9015f7ac280cf0001", "totalScore": "53" }, { "courseName": "大学英语（1）", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e46dc70d0021", "totalScore": "-" }] }, { "courseTypeName": "专业课", "courseList": [{ "courseName": "基因工程", "scoreStatus": "1", "ptcId": "ff80808163a6cb970163ba2719110033", "totalScore": "75" }, { "courseName": "数据结构与算法", "scoreStatus": "1", "ptcId": "ff8080815fbeaf21015fc29b83890013", "totalScore": "66" }] }, { "courseTypeName": "公共基础课", "courseList": [{ "courseName": "大学语文.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e45d16a3001d", "totalScore": "-" }, { "courseName": "马克思主义哲学.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e46dc6d4001f", "totalScore": "-" }, { "courseName": "马克思主义基本原理.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e46dc6f30020", "totalScore": "-" }] }, { "courseTypeName": "实践课", "courseList": [{ "courseName": "课程空间", "scoreStatus": "", "ptcId": "ff808081633fc90e016342902f3f0004", "totalScore": "-" }] }, { "courseTypeName": "选修课", "courseList": [{ "courseName": "怪诞行为学", "scoreStatus": "", "ptcId": "ff808081677e439a01678343957a0013", "totalScore": "-" }, { "courseName": "电磁理论", "scoreStatus": "", "ptcId": "ff80808163a6cb970163ba271910002a", "totalScore": "-" }, { "courseName": "遗传学", "scoreStatus": "1", "ptcId": "ff80808163a6cb970163ba2719120034", "totalScore": "88" }] }], "semesterName": "2020学年第二学期", "isActive": "0" }, { "courseTypeList": [{ "courseTypeName": "选修课", "courseList": [{ "courseName": "神经生物学", "scoreStatus": "", "ptcId": "ff80808163a6cb970163ba2719120036", "totalScore": "-" }] }], "semesterName": "2019学年第二学期", "isActive": "0" }, { "courseTypeList": [{ "courseTypeName": "选修课", "courseList": [{ "courseName": "分子生物学", "scoreStatus": "", "ptcId": "ff80808163a6cb970163ba2719120037", "totalScore": "-" }] }], "semesterName": "2019学年第一学期", "isActive": "0" }, { "courseTypeList": [{ "courseTypeName": "公共基础课", "courseList": [{ "courseName": "思想概论.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e46dc77a0025", "totalScore": "-" }, { "courseName": "计算机应用基础.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e4627b1c001e", "totalScore": "-" }, { "courseName": "高等数学（下）.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e46dc75f0024", "totalScore": "-" }] }, { "courseTypeName": "实践课", "courseList": [{ "courseName": "网络原理", "scoreStatus": "", "ptcId": "ff8080815fbeaf21015fc29b84ba0015", "totalScore": "-" }] }, { "courseTypeName": "选修课", "courseList": [{ "courseName": "工程热力学", "scoreStatus": "", "ptcId": "ff80808163a6cb970163ba271911002f", "totalScore": "-" }, { "courseName": "高等数学.", "scoreStatus": "", "ptcId": "ff80808160bf54bb0160e46dc7450023", "totalScore": "-" }] }], "semesterName": "2018学年第二学期", "isActive": "0" }, { "courseTypeList": [{ "courseTypeName": "公共基础课", "courseList": [{ "courseName": "课程空间操作01", "scoreStatus": "", "ptcId": "ff808081774898a601774ce862140005", "totalScore": "-" }] }], "semesterName": "2018学年第一学期", "isActive": "0" }];
console.log(semesterList);
let tablebody = ``;
for (let i = 0, l1 = semesterList.length; i < l1; i++) {
let semester = semesterList[i];
for (let j = 0, l2 = semester.courseTypeList.length; j < l2; j++) {
let courseType = semester.courseTypeList[j];
tablebody += `<tr>`;
if (j == 0) {
let courseNum = 0;
for (let k = 0, l = semester.courseTypeList.length; k < l; k++) {
courseNum += semester.courseTypeList[k].courseList.length;
}
tablebody += ` <td rowspan="${courseNum}">${semester.semesterName}</td>`;
}
tablebody += `<td rowspan="${courseType.courseList.length}">${courseType.courseTypeName}</td>`;
if (courseType.courseList.length > 0) {
tablebody += `<td>${courseType.courseList[0].courseName}</td>`;
}
tablebody += `</tr>`;
for (let m = 1, l3 = courseType.courseList.length; m < l3; m++) {
let course = courseType.courseList[m];
tablebody += `<tr><td>${course.courseName}</td></tr>`;
}
}
}
$("#content").append(tablebody);
</script>
</body>
</html>
示例2 freemark
<#list semesterList as semester>
<#if (semester.courseTypeList)??&&(semester.courseTypeList?size>0)>
<#list semester.courseTypeList as courseType>
<tr>
<#if courseType_index = 0>
<#assign courseNum = 0>
<#list semester.courseTypeList as courseType2>
<#assign courseNum += courseType2.courseList?size>
</#list>
<td rowspan="${courseNum}">${(semester.semesterName)!}</td>
</#if>
<td rowspan="${courseType.courseList?size}">${(courseType.courseTypeName)!}</td>
<#list courseType.courseList as course>
<#if 0 = course_index>
<td>${(course.courseName)!}</td>
</#if>
</#list>
</tr>
<#list courseType.courseList as course>
<#if 0 != course_index>
<tr>
<td>${(course.courseName)!}</td>
</tr>
</#if>
</#list>
</#list>
</#if>
</#list>
