动态表格指定列合并单元格

最新推荐文章于 2024-08-27 19:09:20 发布

原创

最新推荐文章于 2024-08-27 19:09:20 发布 · 562 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在动态渲染表格时，根据指定列的数据是否相同来合并单元格，特别是针对信息列和名字列，同时展示如何显示每个人的合计列。

动态渲染表格数据“指定列数据相同时合并单元格”

前言：渲染数据动态创建表格，指定列数据相同时，进行合并（合并信息列与名字列，每个人下面抛出合计列）；

1 . 具体表格样式:

在这里插入图片描述

2 . html代码：

<div id="content" class="courseReport-table"></div>

3 . js代码：

<script type="text/javascript">
$(function () {
   
   
    getCourseReport('{$tpl.id}', 1);
});
function getCourseReport(id, arg) {
   
   
    $.ajax({
   
   
        type: 'post',
        dataType: 'json',
        url: '/xxx/xxx/xxx/',
        data: {
   
    'id': id },
        success: function (data) {
   
   
            if (data.code == 1) {
   
    //接口访问成功
                 var rows = data.data;
                 if(rows.length > 0){
   
   
                     $('.download-report').show();
                     var totalPrice = 0.00; //记录一个人的合计
                     var prevPerson = ''; //记录上一个人的id
                     var mark = 0;//这里涉及到简单的运算，mark是计算每次需要合并的格子数
                     var tr = '';
                     for (var i = 0; i < rows.length; i++) {
   
   
                         if (rows[i]['tid'] == prevTeacher)