合并表格行---三层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. 万字长文，带你轻松学习 Spark

    大家好,我是大D. 今天给大家分享一篇 Spark 核心知识点的梳理,对知识点的讲解秉承着能用图解的就不照本宣科地陈述,力求精简.通俗易懂.希望能为新手的入门学习扫清障碍,从基础概念入手.再到原理深入 ...

  2. Ubuntu 静默安装DEB包（非交互式）~解决Ubuntu下安装DEB包弹窗交互的问题

    在Ubuntu环境下安装DEB包时,比如安装MySQL式经常会弹出交互式要输入密码的操作.有时候我们期望编写Shell脚本一键部署MySQL时不想要弹窗交互时,则可以使用以下方式实现自动化安装Deb软 ...

  3. ftp多文件压缩下载

    @GetMapping(value = "/find") public String findfile(String filePath, String fileNames, Htt ...

  4. WC2021 题目清单

    Day2 上午 <IOI题型与趣题分析> 来源 题目 完成情况 备注 IOI2002 Day1T1 Frog 已完成 IOI2002 Day1T2 Utopia IOI2002 Day1T ...

  5. 关于『HTML』:第一弹

    关于『HTML』:第一弹 建议缩放90%食用 根据C2024XSC212童鞋的提问, 我准备写一稿关于『HTML』基础的帖 But! 当我看到了C2024XSC130的 "关于『HTML5』 ...

  6. C++ 智能指针浅析

    C++ 智能指针浅析 为了解决 C++ 中内存管理这个老大难问题,C++ 11 中提供了三种可用的智能指针.(早期标准库中还存在一种 auto_ptr,但由于设计上的缺陷,已经被 unique_ptr ...

  7. 超级重磅！Apache Hudi多模索引对查询优化高达30倍

    与许多其他事务数据系统一样,索引一直是 Apache Hudi 不可或缺的一部分,并且与普通表格式抽象不同. 在这篇博客中,我们讨论了我们如何重新构想索引并在 Apache Hudi 0.11.0 版 ...

  8. php7.1 安装amqp扩展

    在php开发中使用rabbitmq消息队列时,需要安装PHP扩展amqp,安装步骤如下: 直接使用pecl进行amqp扩展的安装, /usr/local/php/bin/pecl install am ...

  9. vue大型电商项目尚品汇（后台篇）day02

    这几天更新有点小慢,逐渐开始回归状态了.尽快把这个后台做完,要开始vue3了 3.添加修改品牌 用到组件 Dialog 对话框,其中visible.sync这个配置是修改他的显示隐藏的,label-w ...

  10. 从零开始实现lmax-Disruptor队列（三）多线程消费者WorkerPool原理解析

    MyDisruptor V3版本介绍 在v2版本的MyDisruptor实现多消费者.消费者组间依赖功能后.按照计划,v3版本的MyDisruptor需要支持多线程消费者的功能. 由于该文属于系列博客 ...