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

墨蓝 2022-12-22 06:21 44阅读 0赞

## 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],
        ]

生成的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center]  
样式部分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;// 赋值

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3a930a61c8084dfcb3378c014f106eb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/322beef918394854be16f5d5e7d9d4b4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关生成一个layui树结构表格

<p>的代码示例如下： </p> <script> layui.use(['tree', 'util'], function(){ var

淩亂°似流年/ 2024年03月25日 13:36/ 0 赞/ 135 阅读

相关怎么样写一个可以根据用户写的代码同步生成对应功能的网站

要写一个可以根据用户写的代码同步生成对应功能的网站，你需要考虑以下几个步骤： 1. 选择一种编程语言和开发框架：首先，你需要选择一种编程语言和开发框架来开发你的网站。例如，

缺乏、安全感/ 2024年03月25日 11:46/ 0 赞/ 33 阅读

相关 JavaScript实现数组对应位置插入另一个数组

系列文章目录 -------------------- 文章目录系列文章目录前言一、使用循环遍历二、使用concat和slice方

太过爱你忘了你带给我的痛/ 2023年10月15日 11:05/ 0 赞/ 76 阅读

相关 js 一个数组数据放到另一个数组

项目中遇到一个问题，有一个主[数组][Link 1]mainArray,需要插入多个其他的小的数组中的元素，如何实现呢？ 1.可以使用concat: let m

àì夳堔傛蜴生んèń/ 2023年09月27日 11:44/ 0 赞/ 209 阅读

相关 java 三维坐标根据起点终点导航计算

需要用到的类 package com.jwuwb.library.service.nav.core; import java.util.Arr

àì夳堔傛蜴生んèń/ 2023年05月29日 02:35/ 0 赞/ 40 阅读

相关 js 数组sort 排序一个数组根据另一个数组排序

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

秒速五厘米/ 2023年02月27日 10:37/ 0 赞/ 51 阅读

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

js根据应该三维数组生成一个类似坐标图的对应表格原始数据格式： let array = [ ["x1","y1",11], [

墨蓝/ 2022年12月22日 06:21/ 0 赞/ 45 阅读

相关从一个数组中根据条件过滤得到一个新的数组

> 积跬步至千里 [Array.prototype.filter()][Array.prototype.filter] `filter()` 方法创建一个新数组, 其

向右看齐/ 2022年11月04日 11:25/ 0 赞/ 290 阅读

相关一个类似node.js的项目fibjs，国人开发

项目地址：[https://github.com/xicilion/fibjs][https_github.com_xicilion_fibjs] [https_

淩亂°似流年/ 2022年08月07日 04:43/ 0 赞/ 42 阅读

相关 js判断一个数组是否包含另一个数组

var a = \[1,2,5,7,3\]; var b = \[1,7,2\]; function isContained(aa,bb)\{ if(!(a

拼搏现实的明天。/ 2022年05月09日 08:06/ 0 赞/ 618 阅读