合并表格行---三层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. Vue的computed和watch的使用和区别

    一.computed: 模板内表达式非常便利,可用于简单计算,当模板内放入太多的逻辑时,模板会过重且难以维护:可以使用computed替代 计算属性是基于它们的响应式依赖进行缓存的,当依赖的响应式数据 ...

  2. SQL连接查询优化[姊妹篇.第五弹]

    上篇的sql优化篇章,更多偏向于优化的思想概念,先前抛出的4个优化问题中,篇幅过长,只对前两个问题进行了解析. 接下来我们一起来谈谈sql的连接查询优化,更偏向于实际运用,并对如下两个问题进行探讨.篇 ...

  3. JavaScript中if语句优化和部分语法糖小技巧推荐

    前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...

  4. 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  5. linux篇-Parse error: syntax error, unexpected ‘new’ (T_NEW) in /usr/local/nginx/html/cacti/lib/adodb

    1首先这是基于lnmp模式进行的 2yum安装 yum -y install httpd mysql mysql-server php php-mysql php-json php-pdo 3lib库 ...

  6. 词云图value传递数据不显示（已解决）

    问题描述: 今天在做词云图时,虽然词云图能够展现出来,但是后台传递过来的数据(每个词出现的次数)却不显示. 错误原因: 错误的将tooltip写在了series内部,如图: 解决方案: 将toolti ...

  7. 通过一次生产case深入理解tomcat线程池

    最近生产上遇到一个case,终于想明白了原因,今天周末来整理一下 生产case 最近测试istio mesh的预热功能(调用端最小连接数原则) 来控制调用端进入k8s刚扩出来的容器的流量 因为刚启动的 ...

  8. 在 GitHub 上玩转开源项目的 Code Review

    一.幕后故事 时光荏苒,岁月如梭-- (太文绉绉了,这不是我的风格) 今天我准备聊聊在 GitHub 上如何玩 Code Review. 突发奇想?心血来潮?不是. 咋回事呢?(对八卦不感兴趣的可以直 ...

  9. Istio 中实现客户端源 IP 的保持

    作者 尹烨,腾讯专家工程师, 腾讯云 TCM 产品负责人.在 K8s.Service Mesh 等方面有多年的实践经验. 导语 对于很多后端服务业务,我们都希望得到客户端源 IP.云上的负载均衡器,比 ...

  10. node.js环境安装及环境变量

    1.nodejs官网下载对应系统的安装包 2.除了你想自定义安装的路径其他一切一直点next往下走 3.打开cmd命令窗口输入node -v,看到v.xx.xx代表node已经装好 node -v 4 ...