合并表格行---三层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. ansible的介绍与安装

    ansible是在远程主机上批量执行命令或者脚本的一个工具 epel源:一个第三方的yum源(阿里巴巴开源镜像站:https://opsx.alibaba.com/mirror?lang=zh-CN) ...

  2. 结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state

    一开始学习了一下 Vuex,感觉比较冗余,就自己做了一个轻量级的状态管理. 后来又学习了 Pinia,于是参考 Pinia 改进了一下自己的状态管理. 结合 Vuex 和 Pinia, 保留需要的功能 ...

  3. Spring-Batch处理MySQL数据后存到CSV文件

    1 介绍 用Spring Batch实现了个简单的需求,从MySQL中读取用户表数据,根据生日计算年龄,将结果输出到csv文件. 1.1 准备表及数据 user test; DROP TABLE IF ...

  4. 深入解读SQL的聚集函数

    摘要:本文从基本聚集操作入手,介绍常用的SQL语法,以及一些扩展的聚集功能,同时会讲到在GaussDB(DWS)里聚集相关的一些优化思路. 本文分享自华为云社区<GaussDB(DWS) SQL ...

  5. RabbitMQ 环境安装

    每日一句 Wisdom is knowing what to do next, skill is knowing how to do it, and virtue is doing it. 智慧是知道 ...

  6. SpringBoot 2.X 快速掌握

    0.重写博文的原因 当初我的SpringBoot系列的知识是采用分节来写的,即:每一个知识点为一篇博文,但是:最近我霉到家了,我发现有些博文神奇般地打不开了,害我去找当初的markdown笔记,但是方 ...

  7. MIT 6.824(Spring 2020) Lab1: MapReduce 文档翻译

    首发于公众号:努力学习的阿新 前言 大家好,这里是阿新. MIT 6.824 是麻省理工大学开设的一门关于分布式系统的明星课程,共包含四个配套实验,实验的含金量很高,十分适合作为校招生的项目经历,在文 ...

  8. Random方法中的nextInt(int arg0)方法讲解

    nextInt方法会生成一个随机的在5以内的数,负载均衡随机策略底层用的就是这个方法: Random rand = new Random(); int index = rand.nextInt(5); ...

  9. 盘点微信小程序跨页面传值的若干方式

    直接给大家上干货 1.跳转页面传递参数 pageA.wxml <button type="primary" bindtap="jumpTo">点击跳 ...

  10. 『忘了再学』Shell基础 — 32、Shell中test测试命令详解

    目录 1.test测试命令 (1)test命令介绍 (2)test命令使用方式 (3)示例 2.按照文件类型进行判断 3.按照文件权限进行判断 4.两个文件之间进行比较 5.两个整数之间比较 6.字符 ...