js根据一个三维数组生成一个类似坐标图的对应表格

js根据应该三维数组生成一个类似坐标图的对应表格

原始数据格式：

let array = [
    ["x1","y1",11],
    ["x1","y2",12],
    ["x1","y3",13],
    ["x1","y4",14],
    ["x2","y1",21],
    ["x2","y4",24],
    ["x2","y2",22],
    ["x2","y3",23],
    ["x3","y3",33],
    ["x3","y2",32],
    ["x3","y4",34],
    ["x3","y1",31],
    ["x4","y4",44],
    ["x4","y1",41],
    ["x4","y3",43],
    ["x4","y2",42],
    ]

生成的效果图：

样式部分style

<style>
        table{
            border-collapse: collapse;
            width: 300px;
        }
        table td{
            border:1px solid #e9323b;
            height: 40px;
            text-align: center;
        }
    </style>

页面部分html：

<div style="margin: 10px 10px 10px 10px">
    <table>
        <thead id="thead">
        </thead>
        <tbody id="contain2"></tbody>
    </table>
</div>

js部分：

let theadTr = '';
    let containStr = '';
    let xArray = [];// x数组：表格的x方向显示字段
    let yArray = [];// y数组：表格的y方向显示字段
    // 添加x数组元素
    for (let j=0;j<=array.length-1;j++){
        xArray.push(array[j][0])           
    }   
    xArray = Array.from(new Set(xArray))// 去重x数组
    theadTr += '<tr><td></td>';// 添加x方向表头数据
    for (let j=0;j<=xArray.length-1;j++){                 
        theadTr += `<td>${xArray[j]}</td>`;
    }
    theadTr += '</tr>';
    thead.innerHTML = theadTr;// 赋值
    // 添加y数组元素  
    for(let i =0;i<=array.length-1;i++){
        yArray.push(array[i][1]) 
    }
    yArray = Array.from(new Set(yArray));// 去重x数组
    // 添加每一个单元格的内容部分
    for (let i=0;i<=yArray.length-1;i++){
        containStr += '<tr>';         
        containStr += `<td>${yArray[i]}</td>`;// 添加x方向第一列数据
        for (var j = 0; j <= array.length - 1; j++) {
            if (yArray[i].includes(array[j][1])){// 与第一列数据进行比较判断是否在同一行
                containStr += `<td>${array[j][2]}</td>`;
            }
        }
        containStr += '</tr>';
    }    
    contain.innerHTML = containStr;// 赋值

如果有写错或者不足的地方，还请在评论区指正！！我会及时修改！！！！！！

请尊重原创，如需转载，还请注明原作者，原文链接，谢谢啦！！！