合并表格行---三层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. 手脱PESpin壳【06.exe】

    1.查壳 2.LoradPE工具检查 一方面可以用LoradPE工具查看重定位,另一方面也可获取一些详细信息 3.查找OEP ①未发现pushad 开始未发现pushad,进行单步步入,很快就能找到p ...

  2. 过早的给方法中 引用对象 设为 null 可被 GC提前回收吗？

    经常在代码中看到有人将 null 赋值给引用类型,来达到让 GC 提前回收的目的,这样做真的有用吗?今天我们就来研究一下. 为了方便讲解,来一段测试代码,提前将 test1=null ,然后调用 GC ...

  3. 使用instanceof操作符判断对象类型及方法的重载

    学习内容: 一.使用instanceof操作符判断对象类型 1.instanceof操作符可以判断一个实例对象是否属于一个类. 语法:对象名 instanceof 类名 2.使用instanceof表 ...

  4. 【Windbg】记一次线程卡主的问题

    测试告诉我们定时任务没有执行了,排查相关日志,只有开始执行,没有执行结束.估计是什么地方卡主了. 所以dump分析日志 先检查一下加载情况 !eeversion 线程卡主了,先看线程 !runaway ...

  5. 使用pip安装库或执行pip命令时报错解决方案

    初次安装pip后执行安装升级一般不会有问题,但是国外的镜像源下载升级由于网速过慢会进行报错,提示需要升级 pip 或者下载速度很慢最后直接报了错如下图: 这个时候只需要修改镜像源即可,建议修改为永久镜 ...

  6. CabloyJS究竟是一款什么样的框架

    CabloyJS是什么样的框架 CabloyJS 是一款自带工作流引擎的 Node.js 全栈框架,一款面向开发者的低代码开发平台,更是一款兼具低代码的开箱即用和专业代码的灵活定制的 PAAS 平台 ...

  7. React项目配置npm run build命令分环境打包

    使用create-react-app脚手架创建的项目默认隐藏了webpack等配置文件信息,使用npm run eject命令暴露这些隐藏的配置文件信息 项目默认有两个环境:开发环境(npm star ...

  8. 开发工具-MySQL下载地址

    更新记录 2022年6月10日 完善标题. 商业版下载 商业版下载地址 https://edelivery.oracle.com/ 使用Oracle账号登录即可下载. 官方下载 https://dev ...

  9. 七、服务器硬件及RAID配置实战

    一.RAID磁盘阵列介绍 磁盘阵列的全名(Redundant Arrays of Inexpensive Disk,RAID),中文简称是独立冗余磁盘阵列.冗余(如果磁盘出现故障,可以保证数据不丢) ...

  10. vue基本原理

    当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访 ...