合并表格行---三层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>

合并表格行---三层for循环遍历数据的更多相关文章

  1. for 循环遍历数据，根据不同的条件判断动态渲染页面！

    整体的逻辑为:for 循环遍历出数据,在for 循环里判断,根据不同的条件渲染 一.html页面结构 二.css就不再写了 三.JS逻辑代码 var listGroup='' ;k<data.i ...

  2. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  3. for 循环遍历数据动态渲染html

    本案例通过ajax动态获取数据,然后遍历出数据渲染html小心踩坑:因为有时候不注意,渲染页面的时候只能输出最后一个数据所以正确写法为下:如果AJAX数据请求成功的情况下: html <div ...

  4. Vue之循环遍历Json数据，填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  5. 使用jquery扩展表格行合并方法探究

    1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...

  6. yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并原数组信息---案例

    yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并元数组信息---案例 public function actionRandomLists(){ //查询到了所 ...

  7. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  8. JS 循环遍历JSON数据 分类： JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如：{&quot;options&quot;:&quot;[{

    JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...

  9. miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题

    最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. <div id="pageGrid ...

随机推荐

  1. 用js给闺女做了一个加减乘除的html

    下班回家用二十分钟给闺女做了一个加减乘除的页面,顺便记录下代码,时间仓促,后期再来修改吧 目录结构 -yq --menu.html --yq.html --yq50.html --yq70.html ...

  2. 385. Mini Parser - LeetCode

    Question 385. Mini Parser Solution 分析:用NI(count,list)来表示NestedInteger,则解析字符串[123,[456,[789]]]过程如下: # ...

  3. 设计并实现大数类 BigNum

    学习任务:设计并实现大数类 BigNum 代码示例: import java.util.Scanner; public class BigNum { private double num; publi ...

  4. 最大流&最小割&费用流模版

    好久都没有搞博客了.想认真写又要准备文化课期末了. ISAP 流程: 原理就是dfs找增广路. 最基础的建反向边以便反悔就不说了. 但是记录一个dep(dis)表示层数,一开始BFS(从t开始,dis ...

  5. 存储器、I/O组织、微处理器

    重点知识 存储器的内部结构及访问方法 存储器分段以及存储器中的逻辑地址和物理地址 I/O端口组织及编址方式 时序和总线操作以及系统的工作方式和特点. 存储器组织 8086有20根地址线,可寻址的存储器 ...

  6. 2006NOIP普及组：明明的随机数

    明明的随机数 时间限制:1000ms        内存限制:65536KB 题目描述: 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数 ...

  7. 分布式机器学习：PageRank算法的并行化实现（PySpark）

    1. PageRank的两种串行迭代求解算法 我们在博客<数值分析:幂迭代和PageRank算法(Numpy实现)>算法中提到过用幂法求解PageRank. 给定有向图 我们可以写出其马尔 ...

  8. 渗透开源工具之sqlmap安装配置环境变量教程

    由于计算机安全牵涉到很多方面,建议自己在服务器上搭建自己的靶场,如何搭建靶场请订阅并查看作者上期教程,这里作者先为大家推荐一个免费开源升级靶场:https://hack.zkaq.cn/   在封神台 ...

  9. ubuntu使用postfix和AWS-SES发送邮件

    在日常开发中,邮件发送是个比较常见的场景.因此出现了很多相关的软件和服务,各大云厂商也推出自己的邮件服务.今天笔者就像大家介绍一种常见的组合,AWS的邮件服务 SES 与邮件服务器 postfix 的 ...

  10. 如何安装TypeScript编译器？

    首先需要nodejs和npm工具.如果没有点击这里下载node(默认会附带安装npm工具):https://nodejs.org/en/ npm安装TypeScript npm install -g ...