代码之家  ›  专栏  ›  技术社区  ›  Chris G

每当我添加一个额外的列作为它的第一列时,如何修复js构建的表?

  •  1
  • Chris G  · 技术社区  · 2 周前

    我有一个用js制作的表,它基于我所拥有的两个对象数组的数据。

    其中一个数组包含所有 subzones 第二个数组包含 microzones , 微区 可以是相同的孩子 subzone .

    我制作了一个函数来构建一个表,这样数据就会像这样放在表中(考虑到本例中的行跨度 SI-N1 是3,而微区列有3行用于微区1、2和3,因为它们是子区的子区 SI-N1 )

    分区 Micro Zone
    SI-N4 概念
    SI-N1 微区1
    微区2
    微区3

    当我像这样显示数据时,我的代码就工作了

    const subZones = [
        {
            "creationUserId": 1913,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SI-N4",
            "id": 65,
            "creationDate": "2022-12-08 13:04:23"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:27",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N1",
            "id": 1,
            "controlId": "9",
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N3",
            "id": 49,
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N2",
            "id": 28,
            "controlId": "18",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N1",
            "id": 29,
            "controlId": "19",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N4",
            "id": 39,
            "controlId": "20",
            "creationDate": "2020-11-24 16:24:21"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N2",
            "id": 48,
            "controlId": "22",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N1",
            "id": 47,
            "controlId": "23",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:19",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N2",
            "id": 2,
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2023-12-15 16:26:38",
            "lastUpdateUserId": 2,
            "active": false,
            "description": "SI-N3",
            "id": 3,
            "creationDate": "2019-11-15 15:03:09"
        }
    ];
    
    const microZones = [
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "COLONIA NUEVA DURANGO",
            "id": 37,
            "creationDate": "2022-12-08 00:58:56"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "GUAJAYVI",
            "id": 39,
            "creationDate": "2022-12-08 00:59:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "NUEVA CONQUISTA",
            "id": 40,
            "creationDate": "2022-12-08 00:59:54"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTANI",
            "id": 41,
            "creationDate": "2022-12-08 13:00:00"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA DEL ROSARIO",
            "id": 42,
            "creationDate": "2022-12-08 13:00:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA YGATIMI",
            "id": 43,
            "creationDate": "2022-12-08 13:00:38"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "ANTEQUERA",
            "id": 44,
            "creationDate": "2022-12-08 13:01:05"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "LIBERACION",
            "id": 45,
            "creationDate": "2022-12-08 13:01:11"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTA ROSA DEL AGUARAY",
            "id": 46,
            "creationDate": "2022-12-08 13:01:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "TACUATI",
            "id": 47,
            "creationDate": "2022-12-08 13:01:55"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CAPITAN BADO",
            "id": 48,
            "creationDate": "2022-12-08 13:02:59"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PEDRO JUAN CABALLERO",
            "id": 49,
            "creationDate": "2022-12-08 13:03:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 65,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CONCEPCION",
            "id": 50,
            "creationDate": "2022-12-08 13:04:39"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateDate": "2023-01-25 11:55:19",
            "lastUpdateUserId": 1913,
            "active": true,
            "description": "CURUGUATY",
            "id": 38,
            "creationDate": "2022-12-08 00:59:03"
        }
    ];
    
    function generateZoneTable(subzones, microzones, isEdition) {
        const tableBody = document.getElementById('tBodyContainerLocationSubZone');
    
        subzones.forEach((subzone) => {
            const subzoneMicrozones = microzones.filter((microzone) => microzone.locationSubZoneId === subzone.id);
            const subzoneRowCount = subzoneMicrozones.length;
    
            subzoneMicrozones.forEach((microzone, index) => {
                const subzoneRow = document.createElement('tr');
    
                if (isEdition){
                    if (index === 0) {
                        //columna para desasociar
                        const unBind = document.createElement('td');
                        unBind.innerHTML = '<i class="mdi mdi-link-off"></i>'; // Insert icon or content
                        unBind.setAttribute('rowspan', subzoneRowCount);
                        subzoneRow.appendChild(unBind);
                    }
    
                    //columna para subzona
                    const subzoneCell = document.createElement('td');
                    subzoneCell.textContent = subzone.description;
                    subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                    //icono de ojo para la subzona
                    const subzoneIcon = document.createElement('i');
                    subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                    subzoneIcon.style.cursor = 'pointer';
                    subzoneIcon.addEventListener('click', () => {
                        showLocationSubZone(subzone.id, "zoneView", false);
                    });
                    subzoneCell.appendChild(subzoneIcon);
                    subzoneRow.appendChild(subzoneCell);
                } else {
                    if (index === 0) {
                        //columna para subzona
                        const subzoneCell = document.createElement('td');
                        subzoneCell.textContent = subzone.description;
                        subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                        //icono de ojo para la subzona
                        const subzoneIcon = document.createElement('i');
                        subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                        subzoneIcon.style.cursor = 'pointer';
                        subzoneIcon.addEventListener('click', () => {
                            showLocationSubZone(subzone.id, "zoneView", false);
                        });
                        subzoneCell.appendChild(subzoneIcon);
                        subzoneRow.appendChild(subzoneCell);
                    }
                }
                //columna para microzona
                const microzoneCell = document.createElement('td');
                microzoneCell.textContent = microzone.description;
    
                // icono de ojo para la microzona
                const microzoneIcon = document.createElement('i');
                microzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                microzoneIcon.style.cursor = 'pointer'; // Cambiar el cursor al puntero
                microzoneIcon.addEventListener('click', () => {
                    showLocationSubZone(microzone.id, "zoneView", true);
                });
                microzoneCell.appendChild(microzoneIcon);
    
                subzoneRow.appendChild(microzoneCell);
                tableBody.appendChild(subzoneRow);
            });
        });
    }
    
    generateZoneTable(subZones, microZones, false);
    /* Add border to table and cells */
    .table-bordered {
        border: 1px solid #dee2e6;
    }
    
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }
    
    /* Add padding to table cells */
    .table th,
    .table td {
        padding: 0.75rem;
    }
    
    /* Center the content of table cells */
    .table td,
    .table th {
        text-align: center;
    }
    
    /* Add margin to the table */
    #zoneGeographicAssociation {
        margin-top: 10px; /* Adjust as needed */
    }
    
    /* Style the button */
    .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    .btn-secondary:hover {
        color: #fff;
        background-color: #5a6268;
        border-color: #545b62;
    }
    
    .btn-secondary:focus, .btn-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    }
    
    .btn-secondary.disabled, .btn-secondary:disabled {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    /* Adjust spacing between elements */
    .input-group {
        margin-bottom: 10px;
    }
    
    /* Optional: Add hover effect to table rows */
    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
    <div class="col-md-12 col-sm-12 mt-3">
        <div class="row">
            <div class="input-group">
                <h4>Asociación Geográfica</h4>
                <button type="button" class="btn btn-secondary btn-sm ml-1 " onclick="createLocationSubZone(true)">Agregar</button>
            </div>
            <table class="table table-bordered table-centered mb-0 mt-3" id="zoneGeographicAssociation" style="width:100%;">
                <thead>
                    <tr>
                        <th class="w-50">Sub-Zonas</th>
                        <th class="w-50">Micro-Zonas</th>
                    </tr>
                </thead>
                <tbody id="tBodyContainerLocationSubZone">
                </tbody>
            </table>
        </div>
    </div>

    然而,每当我需要编辑数据时,我的HTML就会转换为在子区域之前添加一个额外的列,其标题为“dessocial” isEdition 参数变为 true 就在那时,我的桌子变得一团糟,看起来像这样

    const subZones = [
        {
            "creationUserId": 1913,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SI-N4",
            "id": 65,
            "creationDate": "2022-12-08 13:04:23"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:27",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N1",
            "id": 1,
            "controlId": "9",
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N3",
            "id": 49,
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N2",
            "id": 28,
            "controlId": "18",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N1",
            "id": 29,
            "controlId": "19",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N4",
            "id": 39,
            "controlId": "20",
            "creationDate": "2020-11-24 16:24:21"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N2",
            "id": 48,
            "controlId": "22",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N1",
            "id": 47,
            "controlId": "23",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:19",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N2",
            "id": 2,
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2023-12-15 16:26:38",
            "lastUpdateUserId": 2,
            "active": false,
            "description": "SI-N3",
            "id": 3,
            "creationDate": "2019-11-15 15:03:09"
        }
    ];
    
    const microZones = [
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "COLONIA NUEVA DURANGO",
            "id": 37,
            "creationDate": "2022-12-08 00:58:56"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "GUAJAYVI",
            "id": 39,
            "creationDate": "2022-12-08 00:59:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "NUEVA CONQUISTA",
            "id": 40,
            "creationDate": "2022-12-08 00:59:54"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTANI",
            "id": 41,
            "creationDate": "2022-12-08 13:00:00"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA DEL ROSARIO",
            "id": 42,
            "creationDate": "2022-12-08 13:00:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA YGATIMI",
            "id": 43,
            "creationDate": "2022-12-08 13:00:38"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "ANTEQUERA",
            "id": 44,
            "creationDate": "2022-12-08 13:01:05"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "LIBERACION",
            "id": 45,
            "creationDate": "2022-12-08 13:01:11"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTA ROSA DEL AGUARAY",
            "id": 46,
            "creationDate": "2022-12-08 13:01:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "TACUATI",
            "id": 47,
            "creationDate": "2022-12-08 13:01:55"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CAPITAN BADO",
            "id": 48,
            "creationDate": "2022-12-08 13:02:59"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PEDRO JUAN CABALLERO",
            "id": 49,
            "creationDate": "2022-12-08 13:03:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 65,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CONCEPCION",
            "id": 50,
            "creationDate": "2022-12-08 13:04:39"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateDate": "2023-01-25 11:55:19",
            "lastUpdateUserId": 1913,
            "active": true,
            "description": "CURUGUATY",
            "id": 38,
            "creationDate": "2022-12-08 00:59:03"
        }
    ];
    
    function generateZoneTable(subzones, microzones, isEdition) {
        const tableBody = document.getElementById('tBodyContainerLocationSubZone');
    
        subzones.forEach((subzone) => {
            const subzoneMicrozones = microzones.filter((microzone) => microzone.locationSubZoneId === subzone.id);
            const subzoneRowCount = subzoneMicrozones.length;
    
            subzoneMicrozones.forEach((microzone, index) => {
                const subzoneRow = document.createElement('tr');
    
                if (isEdition){
                    if (index === 0) {
                        //columna para desasociar
                        const unBind = document.createElement('td');
                        unBind.innerHTML = '<i class="mdi mdi-link-off"></i>'; // Insert icon or content
                        unBind.setAttribute('rowspan', subzoneRowCount);
                        subzoneRow.appendChild(unBind);
                    }
    
                    //columna para subzona
                    const subzoneCell = document.createElement('td');
                    subzoneCell.textContent = subzone.description;
                    subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                    //icono de ojo para la subzona
                    const subzoneIcon = document.createElement('i');
                    subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                    subzoneIcon.style.cursor = 'pointer';
                    subzoneIcon.addEventListener('click', () => {
                        showLocationSubZone(subzone.id, "zoneView", false);
                    });
                    subzoneCell.appendChild(subzoneIcon);
                    subzoneRow.appendChild(subzoneCell);
                } else {
                    if (index === 0) {
                        //columna para subzona
                        const subzoneCell = document.createElement('td');
                        subzoneCell.textContent = subzone.description;
                        subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                        //icono de ojo para la subzona
                        const subzoneIcon = document.createElement('i');
                        subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                        subzoneIcon.style.cursor = 'pointer';
                        subzoneIcon.addEventListener('click', () => {
                            showLocationSubZone(subzone.id, "zoneView", false);
                        });
                        subzoneCell.appendChild(subzoneIcon);
                        subzoneRow.appendChild(subzoneCell);
                    }
                }
                //columna para microzona
                const microzoneCell = document.createElement('td');
                microzoneCell.textContent = microzone.description;
    
                // icono de ojo para la microzona
                const microzoneIcon = document.createElement('i');
                microzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                microzoneIcon.style.cursor = 'pointer'; // Cambiar el cursor al puntero
                microzoneIcon.addEventListener('click', () => {
                    showLocationSubZone(microzone.id, "zoneView", true);
                });
                microzoneCell.appendChild(microzoneIcon);
    
                subzoneRow.appendChild(microzoneCell);
                tableBody.appendChild(subzoneRow);
            });
        });
    }
    
    generateZoneTable(subZones, microZones, true);
    /*向表和单元格添加边框*/
    .表边框{
    边框:1px实心#dee2e6;
    }
    
    .table-bedred th,
    .table-bedred td{
    边框:1px实心#dee2e6;
    }
    
    /*向表格单元格添加填充*/
    .表th,
    .table td{
    衬垫:0.75rem;
    }
    
    /*将表格单元格的内容居中*/
    .tabletd,
    .表th{
    文本对齐:居中;
    }
    
    /*向表格添加边距*/
    #区域地理协会{
    页边空白:10px;/*根据需要进行调整*/
    }
    
    /*设置按钮样式*/
    .btn次要{
    颜色:#fff;
    背景颜色:#6c757d;
    边框颜色:#6c757d;
    }
    
    .btn secondary:悬停{
    颜色:#fff;
    背景颜色:#5a6268;
    边框颜色:#554b62;
    }
    
    .btn-secondary:焦点,.btn-sesecondary。焦点{
    长方体阴影:0 0 0 0.2rem rgba(108、117、125、0.5);
    }
    
    .btn-secondary已禁用,.btn-sesecondary:已禁用{
    颜色:#fff;
    背景颜色:#6c757d;
    边框颜色:#6c757d;
    }
    
    /*调整元素之间的间距*/
    .输入组{
    底部边距:10px;
    }
    
    /*可选:向表行添加悬停效果*/
    .table hover tbody tr:hover{
    背景颜色:#f8f9fa;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
    <div class="col-md-12 col-sm-12 mt-3">
        <div class="row">
            <div class="input-group">
                <h4>Asociación Geográfica</h4>
                <button type="button" class="btn btn-secondary btn-sm ml-1 " onclick="createLocationSubZone(true)">Agregar</button>
            </div>
            <table class="table table-bordered table-centered mb-0 mt-3" id="zoneGeographicAssociation" style="width:100%;">
                <thead>
                    <tr>
                        <th class="w-10">Desasociar</th>
                        <th class="w-40">Sub-Zonas</th>
                        <th class="w-50">Micro-Zonas</th>
                    </tr>
                </thead>
                <tbody id="tBodyContainerLocationSubZone">
                </tbody>
            </table>
        </div>
    </div>

    我希望得到的行为只是在表的开头添加一个额外的列,其中有一个稍后将具有功能的图标(这一部分现在不重要)。带有图标的额外列应该与子区域共享相同的行跨度,其余的看起来应该相同,但我的表都一团糟。

    感谢您的帮助

    2 回复  |  直到 2 周前
        1
  •  2
  •   Sachink    2 周前

    刚刚更新了isEditable块中索引0的结束。 请注意,如果您只编辑subZone lineItem,这将帮助您解决当前问题。要在每个microZone项目上添加图标,您需要更新代码。

    const subZones = [
        {
            "creationUserId": 1913,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SI-N4",
            "id": 65,
            "creationDate": "2022-12-08 13:04:23"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:27",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N1",
            "id": 1,
            "controlId": "9",
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N3",
            "id": 49,
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N2",
            "id": 28,
            "controlId": "18",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N1",
            "id": 29,
            "controlId": "19",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N4",
            "id": 39,
            "controlId": "20",
            "creationDate": "2020-11-24 16:24:21"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N2",
            "id": 48,
            "controlId": "22",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N1",
            "id": 47,
            "controlId": "23",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:19",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N2",
            "id": 2,
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2023-12-15 16:26:38",
            "lastUpdateUserId": 2,
            "active": false,
            "description": "SI-N3",
            "id": 3,
            "creationDate": "2019-11-15 15:03:09"
        }
    ];
    
    const microZones = [
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "COLONIA NUEVA DURANGO",
            "id": 37,
            "creationDate": "2022-12-08 00:58:56"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "GUAJAYVI",
            "id": 39,
            "creationDate": "2022-12-08 00:59:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "NUEVA CONQUISTA",
            "id": 40,
            "creationDate": "2022-12-08 00:59:54"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTANI",
            "id": 41,
            "creationDate": "2022-12-08 13:00:00"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA DEL ROSARIO",
            "id": 42,
            "creationDate": "2022-12-08 13:00:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA YGATIMI",
            "id": 43,
            "creationDate": "2022-12-08 13:00:38"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "ANTEQUERA",
            "id": 44,
            "creationDate": "2022-12-08 13:01:05"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "LIBERACION",
            "id": 45,
            "creationDate": "2022-12-08 13:01:11"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTA ROSA DEL AGUARAY",
            "id": 46,
            "creationDate": "2022-12-08 13:01:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "TACUATI",
            "id": 47,
            "creationDate": "2022-12-08 13:01:55"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CAPITAN BADO",
            "id": 48,
            "creationDate": "2022-12-08 13:02:59"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PEDRO JUAN CABALLERO",
            "id": 49,
            "creationDate": "2022-12-08 13:03:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 65,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CONCEPCION",
            "id": 50,
            "creationDate": "2022-12-08 13:04:39"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateDate": "2023-01-25 11:55:19",
            "lastUpdateUserId": 1913,
            "active": true,
            "description": "CURUGUATY",
            "id": 38,
            "creationDate": "2022-12-08 00:59:03"
        }
    ];
    
    function generateZoneTable(subzones, microzones, isEdition) {
        const tableBody = document.getElementById('tBodyContainerLocationSubZone');
    
        subzones.forEach((subzone) => {
            const subzoneMicrozones = microzones.filter((microzone) => microzone.locationSubZoneId === subzone.id);
            const subzoneRowCount = subzoneMicrozones.length;
    
            subzoneMicrozones.forEach((microzone, index) => {
                const subzoneRow = document.createElement('tr');
    
                if (isEdition){
                    if (index === 0) {
                        //columna para desasociar
                        const unBind = document.createElement('td');
                        unBind.innerHTML = '<i class="mdi mdi-link-off"></i>'; // Insert icon or content
                        unBind.setAttribute('rowspan', subzoneRowCount);
                        subzoneRow.appendChild(unBind);
    
                        //columna para subzona
                        const subzoneCell = document.createElement('td');
                        subzoneCell.textContent = subzone.description;
                        subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                        //icono de ojo para la subzona
                        const subzoneIcon = document.createElement('i');
                        subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                        subzoneIcon.style.cursor = 'pointer';
                        subzoneIcon.addEventListener('click', () => {
                            showLocationSubZone(subzone.id, "zoneView", false);
                        });
                        subzoneCell.appendChild(subzoneIcon);
                        subzoneRow.appendChild(subzoneCell);
                    }
                } else {
                    if (index === 0) {
                        //columna para subzona
                        const subzoneCell = document.createElement('td');
                        subzoneCell.textContent = subzone.description;
                        subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                        //icono de ojo para la subzona
                        const subzoneIcon = document.createElement('i');
                        subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                        subzoneIcon.style.cursor = 'pointer';
                        subzoneIcon.addEventListener('click', () => {
                            showLocationSubZone(subzone.id, "zoneView", false);
                        });
                        subzoneCell.appendChild(subzoneIcon);
                        subzoneRow.appendChild(subzoneCell);
                    }
                }
                //columna para microzona
                const microzoneCell = document.createElement('td');
                microzoneCell.textContent = microzone.description;
    
                // icono de ojo para la microzona
                const microzoneIcon = document.createElement('i');
                microzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                microzoneIcon.style.cursor = 'pointer'; // Cambiar el cursor al puntero
                microzoneIcon.addEventListener('click', () => {
                    showLocationSubZone(microzone.id, "zoneView", true);
                });
                microzoneCell.appendChild(microzoneIcon);
    
                subzoneRow.appendChild(microzoneCell);
                tableBody.appendChild(subzoneRow);
            });
        });
    }
    
    generateZoneTable(subZones, microZones, true);
    /* Add border to table and cells */
    .table-bordered {
        border: 1px solid #dee2e6;
    }
    
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }
    
    /* Add padding to table cells */
    .table th,
    .table td {
        padding: 0.75rem;
    }
    
    /* Center the content of table cells */
    .table td,
    .table th {
        text-align: center;
    }
    
    /* Add margin to the table */
    #zoneGeographicAssociation {
        margin-top: 10px; /* Adjust as needed */
    }
    
    /* Style the button */
    .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    .btn-secondary:hover {
        color: #fff;
        background-color: #5a6268;
        border-color: #545b62;
    }
    
    .btn-secondary:focus, .btn-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    }
    
    .btn-secondary.disabled, .btn-secondary:disabled {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    /* Adjust spacing between elements */
    .input-group {
        margin-bottom: 10px;
    }
    
    /* Optional: Add hover effect to table rows */
    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
    <div class="col-md-12 col-sm-12 mt-3">
        <div class="row">
            <div class="input-group">
                <h4>Asociación Geográfica</h4>
                <button type="button" class="btn btn-secondary btn-sm ml-1 " onclick="createLocationSubZone(true)">Agregar</button>
            </div>
            <table class="table table-bordered table-centered mb-0 mt-3" id="zoneGeographicAssociation" style="width:100%;">
                <thead>
                    <tr>
                        <th class="w-10">Desasociar</th>
                        <th class="w-40">Sub-Zonas</th>
                        <th class="w-50">Micro-Zonas</th>
                    </tr>
                </thead>
                <tbody id="tBodyContainerLocationSubZone">
                </tbody>
            </table>
        </div>
    </div>
        2
  •  1
  •   Lajos Arpad    2 周前

    您只需要确保只写一次聚合值,就像您对第一列所做的那样:

    const subZones = [
        {
            "creationUserId": 1913,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SI-N4",
            "id": 65,
            "creationDate": "2022-12-08 13:04:23"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:27",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N1",
            "id": 1,
            "controlId": "9",
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N3",
            "id": 49,
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N2",
            "id": 28,
            "controlId": "18",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N1",
            "id": 29,
            "controlId": "19",
            "creationDate": "2019-12-18 11:39:44"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PU-N4",
            "id": 39,
            "controlId": "20",
            "creationDate": "2020-11-24 16:24:21"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N2",
            "id": 48,
            "controlId": "22",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "OF-N1",
            "id": 47,
            "controlId": "23",
            "creationDate": "2020-11-26 16:44:41"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2019-12-18 10:39:19",
            "lastUpdateUserId": 2,
            "active": true,
            "description": "SI-N2",
            "id": 2,
            "creationDate": "2019-11-15 15:03:09"
        },
        {
            "creationUserId": 2,
            "locationZoneId": 1,
            "lastUpdateDate": "2023-12-15 16:26:38",
            "lastUpdateUserId": 2,
            "active": false,
            "description": "SI-N3",
            "id": 3,
            "creationDate": "2019-11-15 15:03:09"
        }
    ];
    
    const microZones = [
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "COLONIA NUEVA DURANGO",
            "id": 37,
            "creationDate": "2022-12-08 00:58:56"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "GUAJAYVI",
            "id": 39,
            "creationDate": "2022-12-08 00:59:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "NUEVA CONQUISTA",
            "id": 40,
            "creationDate": "2022-12-08 00:59:54"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTANI",
            "id": 41,
            "creationDate": "2022-12-08 13:00:00"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA DEL ROSARIO",
            "id": 42,
            "creationDate": "2022-12-08 13:00:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "VILLA YGATIMI",
            "id": 43,
            "creationDate": "2022-12-08 13:00:38"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "ANTEQUERA",
            "id": 44,
            "creationDate": "2022-12-08 13:01:05"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "LIBERACION",
            "id": 45,
            "creationDate": "2022-12-08 13:01:11"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "SANTA ROSA DEL AGUARAY",
            "id": 46,
            "creationDate": "2022-12-08 13:01:48"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 2,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "TACUATI",
            "id": 47,
            "creationDate": "2022-12-08 13:01:55"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CAPITAN BADO",
            "id": 48,
            "creationDate": "2022-12-08 13:02:59"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 3,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "PEDRO JUAN CABALLERO",
            "id": 49,
            "creationDate": "2022-12-08 13:03:06"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 65,
            "lastUpdateUserId": 0,
            "active": true,
            "description": "CONCEPCION",
            "id": 50,
            "creationDate": "2022-12-08 13:04:39"
        },
        {
            "creationUserId": 1913,
            "locationSubZoneId": 1,
            "lastUpdateDate": "2023-01-25 11:55:19",
            "lastUpdateUserId": 1913,
            "active": true,
            "description": "CURUGUATY",
            "id": 38,
            "creationDate": "2022-12-08 00:59:03"
        }
    ];
    
    function generateZoneTable(subzones, microzones, isEdition) {
        const tableBody = document.getElementById('tBodyContainerLocationSubZone');
    
        subzones.forEach((subzone) => {
            const subzoneMicrozones = microzones.filter((microzone) => microzone.locationSubZoneId === subzone.id);
            const subzoneRowCount = subzoneMicrozones.length;
    
            subzoneMicrozones.forEach((microzone, index) => {
                const subzoneRow = document.createElement('tr');
    
                if (isEdition){
                    if (index === 0) {
                        //columna para desasociar
                        const unBind = document.createElement('td');
                        unBind.innerHTML = '<i class="mdi mdi-link-off"></i>'; // Insert icon or content
                        unBind.setAttribute('rowspan', subzoneRowCount);
                        subzoneRow.appendChild(unBind);
                        //columna para subzona
                        const subzoneCell = document.createElement('td');
                        subzoneCell.textContent = subzone.description;
                        subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                        //icono de ojo para la subzona
                        const subzoneIcon = document.createElement('i');
                        subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                        subzoneIcon.style.cursor = 'pointer';
                        subzoneIcon.addEventListener('click', () => {
                            showLocationSubZone(subzone.id, "zoneView", false);
                        });
                        subzoneCell.appendChild(subzoneIcon);
                        subzoneRow.appendChild(subzoneCell);
                    }
    
                } else {
                    if (index === 0) {
                        //columna para subzona
                        const subzoneCell = document.createElement('td');
                        subzoneCell.textContent = subzone.description;
                        subzoneCell.setAttribute('rowspan', subzoneRowCount);
    
                        //icono de ojo para la subzona
                        const subzoneIcon = document.createElement('i');
                        subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                        subzoneIcon.style.cursor = 'pointer';
                        subzoneIcon.addEventListener('click', () => {
                            showLocationSubZone(subzone.id, "zoneView", false);
                        });
                        subzoneCell.appendChild(subzoneIcon);
                        subzoneRow.appendChild(subzoneCell);
                    }
                }
                //columna para microzona
                const microzoneCell = document.createElement('td');
                microzoneCell.textContent = microzone.description;
    
                // icono de ojo para la microzona
                const microzoneIcon = document.createElement('i');
                microzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                microzoneIcon.style.cursor = 'pointer'; // Cambiar el cursor al puntero
                microzoneIcon.addEventListener('click', () => {
                    showLocationSubZone(microzone.id, "zoneView", true);
                });
                microzoneCell.appendChild(microzoneIcon);
    
                subzoneRow.appendChild(microzoneCell);
                tableBody.appendChild(subzoneRow);
            });
        });
    }
    
    generateZoneTable(subZones, microZones, true);
    /* Add border to table and cells */
    .table-bordered {
        border: 1px solid #dee2e6;
    }
    
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }
    
    /* Add padding to table cells */
    .table th,
    .table td {
        padding: 0.75rem;
    }
    
    /* Center the content of table cells */
    .table td,
    .table th {
        text-align: center;
    }
    
    /* Add margin to the table */
    #zoneGeographicAssociation {
        margin-top: 10px; /* Adjust as needed */
    }
    
    /* Style the button */
    .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    .btn-secondary:hover {
        color: #fff;
        background-color: #5a6268;
        border-color: #545b62;
    }
    
    .btn-secondary:focus, .btn-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    }
    
    .btn-secondary.disabled, .btn-secondary:disabled {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    /* Adjust spacing between elements */
    .input-group {
        margin-bottom: 10px;
    }
    
    /* Optional: Add hover effect to table rows */
    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
    <div class="col-md-12 col-sm-12 mt-3">
        <div class="row">
            <div class="input-group">
                <h4>Asociación Geográfica</h4>
                <button type="button" class="btn btn-secondary btn-sm ml-1 " onclick="createLocationSubZone(true)">Agregar</button>
            </div>
            <table class="table table-bordered table-centered mb-0 mt-3" id="zoneGeographicAssociation" style="width:100%;">
                <thead>
                    <tr>
                        <th class="w-10">Desasociar</th>
                        <th class="w-40">Sub-Zonas</th>
                        <th class="w-50">Micro-Zonas</th>
                    </tr>
                </thead>
                <tbody id="tBodyContainerLocationSubZone">
                </tbody>
            </table>
        </div>
    </div>