从Javascript数组创建表

我希望得到一组数组，并将它们转换为表对象或类似于表的东西。在本例中，我有一个潜在RGB值的列表。 我不关心可视化二维对象，只关心从中选择和操作

我从以下内容开始：一组数组：

["Class", "R", "G", "B"],
["1", "166", "206", "227"],
["2", "31", "120", "180"], 
["3", "51", "160", "44"]

然后，我希望能够基于列或行选择内容。我更关心的是选择元素的简单性，而不是创建html对象tr/td。我想根据列标识符R:166、31、51来选择和处理数据——例如，或者根据行标识符1:31、120、180来选择和处理数据

Class   |   R    |    G    |    B  
1       |  166   |   206   |   227  
2       |   31   |   120   |   180   
3       |   51   |   160   |    44  

以下是我的问题： 1.我在找什么样的东西？ 2.如何从一系列数组中创建它，其中键/表头基于第一个数组动态赋值，而不是硬编码

我感谢你对这一点的看法：

---

David

我建议使用对象数组：

var color = [
    { Class: 1, R: 166, G: 206, B: 227 },
    { Class: 2, R: 31, G: 120, B: 180 },
    { Class: 3, R: 51, G: 160, B: 44 }
];

及

用于存储数组项的索引

通过颜色[classIndex[1]['R']访问

工作示例：

函数colorTypecl，r，g，b{ 返回{Class:cl，R:R，G:G，B:B}； } 函数addColorct{ color.pushct； classIndex={}； color.forEachfunction a，i{classIndex[a.Class]=i；}； } 函数getColorColumnkey{ return color.mapfunction a{返回一个[key]；}； } 函数updateColorColumnkey，值{ color.foreacha函数，i{a[key]=值[i]；}； } 函数转换键{ color.foreacha函数，i{a[key]=cba[key]；}； } 变量颜色=[ {类别：1，R:166，G:206，B:227}， {类别：2，R:31，G:120，B:180}， {类别：3，R:51，G:160，B:44} ], classIndex={ '1': 0, '2': 1, '3': 2 }; //显示单个项目 文件。书写； //显示颜色数组 文件。书写； //添加新颜色 添加颜色类型4、51、102、153； 文件。书写； 文件。书写； //获取B列 var blue=getColorColumn'B'； 文件。书写； //变蓝 blue=blue.mapfunction a{return Math.mina*1.2255 | 0；}； 文件。书写； //用蓝色更新列B 更新颜色栏'B'，蓝色； 文件。书写； //直接更改R changeColumn'R'，函数v{return Math.maxv*0.5,0 | 0；}；

---

文件。书写 这是我想到的。好处是它是一个可重用的数据结构，与列名称无关，并且可以保留原始数据结构数组。您需要在必要时添加任何必要的健全性检查，以确保行/列存在，等等

---

Javascript+多维数组=Javascript对象又名JSON您所说的“选择”和易用性具体是什么意思？用户是否单击某个位置来选择行/列，是否将值输入到搜索表单中，…？我不想太多地考虑最终用户gui，我只想找到一种方法，以两个维度来识别数据元素：类别1、2、3和颜色r、g、b。谢谢！你怎么用这个正是我想的。非常感谢。如何使用原始数据中的对象访问阵列是我的下一个挑战。我希望动态添加密钥，而不是硬编码。但这是另一个问题。谢谢你让我开始。谢谢。这解决了我问题的第二部分——首先如何安排我的数据。

var classIndex = {
    '1': 0,
    '2': 1,
    '3': 2
};

var RGBData = function(arrayOfDataElements) {

    this.keys = arrayOfDataElements[0];
    this.data = arrayOfDataElements.slice(1);

    this.getRow = function(row) {
        return this.data[row-1].slice(1);
    };

    this.getColumn = function(column) {
        return this.data.map(function(row) {
            return row[this.keys.indexOf(column)];
        }, this);
    };

    this.addRow = function(row) {
        this.data.push(row);
    }

    this.updateValue = function(row, column, value) {
        var index = this.keys.indexOf(column);
        this.data[row-1][index] = value;
    };
};

var arrayOfDataElements = [
    ["Class", "R", "G", "B"],
    ["1", "166", "206", "227"],
    ["2", "31", "120", "180"]
];

var data = new RGBData(arrayOfDataElements);

alert("Row 2: " + data.getRow("2"));
alert("Column R: " + data.getColumn("R"));
data.updateValue("2", "R", "69");
alert("Column R after update: " + data.getColumn("R"));