将数组值插入特定的表格单元格/列答案

【问题标题】：to insert array values into specific table cells/columns将数组值插入特定的表格单元格/列
【发布时间】：2018-05-16 08:59:35
【问题描述】：

我正在创建一个函数，该函数应该从数组（结果）中获取数据并将它们放入表的特定列中。该数组用数字划分，这些数字标识应在其中输入以下数据的列。

例如：

var results = [1, 'aaaaaa', 'bbb',2, 'ccc', 3, 'dddd', 'eeee', 4, 'fff'];

col 1: 'aaaaaa', 'bbb';
col 2: 'ccc'; etc.

我已经尝试了很多方法，但我无法让它发挥作用。

目前代码如下所示。我不知道该怎么做：

var results = [1, 'aaaaaa','bbb',2, 'ccc', 3, 'dddd', 'eeee', 4, 'fff'];
var k = 0;
function populateTable(table, rows, cells, content) {
    if (!table) table = document.createElement('table');
    for (var i = 0; i < rows; ++i) {
        var row = document.createElement('tr');
        for (var j = 0; j < cells; ++j) {
            row.appendChild(document.createElement('td'));
            if (i > 0 && j == 0) {
                row.cells[j].appendChild(document.createTextNode(content + 'PN'));
            }
            else if (i == 0 && j == 0) {
                row.cells[j].appendChild(document.createTextNode(content + 'TYPE'));
            }
            else if (j > 0 && i == 0) {
                row.cells[j].appendChild(document.createTextNode(content + 'LABLE ' + j));
            }

            else if (j > 0 && i > 0 && results[i] != k) {
                    row.cells[k].appendChild(document.createTextNode(content + results[i]));

            }
        }
        table.appendChild(row);
        k++;
    }
    return table;
}

function load() {
    document.getElementById('tablearea')
        .appendChild(populateTable(null, 9, 10, ""));
}

【问题讨论】：

你results数组的数据格式很糟糕，这就是为什么这比应该的更难。你有控制权吗？
是的。最好的格式是什么？
我会考虑一个指向数组的对象：{1: ['aaaaaa', 'bbb']}，或者一个数组数组[['aaaaaa', 'bbb'], ['ccc'], ['dddd', 'eeee'], ['fff']] 然后你不必扫描找到列号——索引是列。当然，如果你能把数据按行排列就更好了。
感谢 Mark_M。我要试试这个方法。 =D。

标签： javascript arrays html-table

【解决方案1】：

首先将结果格式化为：

{
  1: ['aaaaaa', 'bbb'],
  2: ['ccc'],
  3: ['dddd', 'eeee'],
  4: ['fff']
}

然后生成表格：

const results = [1, 'aaaaaa', 'bbb',2, 'ccc', 3, 'dddd', 'eeee', 4, 'fff', 5, 'ggg', 'hhhh', 'iiii'];

// First format the results

const formattedResults = {};
let columnIndex = 0;

results.forEach(elt => {
  if (!isNaN(elt)) {
    formattedResults[elt] = [];
    columnIndex = elt;
  } else {
    formattedResults[columnIndex].push(elt);
  }
});

// Then generate the table
const table = document.createElement('table');

const columnKeys = Object.keys(formattedResults);
const maxRows = Math.max(...columnKeys.map(key => formattedResults[key].length));

for (let i = 0; i < maxRows; i = i + 1) {
  const tr = document.createElement('tr');
  
  columnKeys.forEach(colKey => {
    const td = document.createElement('td');
    
    if (formattedResults[colKey][i] !== undefined) {
      td.textContent = formattedResults[colKey][i];
      tr.appendChild(td);
    }
  });
  
  table.appendChild(tr);
}

document.getElementById('tableArea').appendChild(table);

&lt;div id="tableArea"&gt;&lt;/div&gt;

【讨论】：