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

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

html-table html javascript
  •  1
  • Chris G  · 技术社区  · 3 月前

    我有一个用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 回复  |  直到 3 月前
        1
  •  2
  •   Sachink    3 月前

    刚刚更新了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    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, 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>
    推荐文章
    Mona Jalal  ·  在HTML中使用PHP显示表的内容
    2 年前
    free  ·  基于特定默认列对表进行排序
    2 年前
    CRaw  ·  表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐
    2 年前
    Bryan Santos  ·  固定表头与引导
    2 年前
    Muhammad Moosa Zubairy  ·  在div之后得到不需要的逗号
    2 年前
    buckshot  ·  使用CSS隐藏gridview中的某些列
    2 年前
    SeniorFluffie  ·  完整动态HTML表悬停事件不工作
    6 年前
    Smithy  ·  如何将此文本置于电子邮件模板中表格行的中心
    6 年前
    user7158897  ·  如何基于地图区域单击显示/隐藏不同的表内容
    6 年前
    user9727941  ·  不知道如何在空白td中插入这些数据
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号