使用Javascript数组和对象创建表 [英] Create table with Javascript array and object

问题描述

我有一个数组和一个对象：

I have one array and one object:

labels = ['ID','Name']; 
object = {
    ["id": "1", 'name': "richard"],
    ["id": "2", 'name': "santos"]
};

我必须创建一个这样的表：

and I have to create a table like this:

<table>
<thead>
    <tr>
        <td>ID</td>
        <td>Name</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Richard</td>
        <td>Santos</td>
    </tr>
</tbody>

问题是：

对象变量有时可能有不同的键名，所以我必须动态地用其他对象创建这个表，我试图整天这样做但没有成功，任何人都可以帮助我吗？我是Javascript的新手。
obs：标签和对象变量总是具有相同的大小。

The problem is that:
The "object" variable sometimes could have different key names so I have to create this table dynamically with other objects, I'm trying to do this all day but no success, can anyone help me? I'm new to Javascript. obs: the label and the object vars always have the same size.

某种对象。

var labels = ['ID','NOME'];
var object = {
    ["id": "1", 'nome': "richard"],
    ["id": "2", 'nome': "adriana"]
};

var labels = ['ID','NAME', 'PLATE'];
var object = {
    ["id": "1", 'nome': "jetta",  'plate': "DFG-1222"],
    ["id": "2", 'nome': "fusion", 'plate': "DFF-3342"]
};

推荐答案

最初有两个问题：

1. N a 我或N o 我？请修复你的错字（我知道Nome是法语，所以如果它不是拼写错误，我建议你介绍一下 i18n 解决方案）。


2. 另外请注意您的语法错误（有些已经提供了您可以考虑的建议编辑）。

1. Is that Name or Nome? Please fix your typo (I know Nome is French, so if it's not typo, I suggest you introduce an i18n solution).
2. Also please mind your syntax errors (some have given suggested edits that you could consider).

之后，这是我根据输入数据以编程方式创建表的方法：

After that, here's my approach for programmatically create tables based on input data:

function buildTable(labels, objects, container) {
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  var theadTr = document.createElement('tr');
  for (var i = 0; i < labels.length; i++) {
    var theadTh = document.createElement('th');
    theadTh.innerHTML = labels[i];
    theadTr.appendChild(theadTh);
  }
  thead.appendChild(theadTr);
  table.appendChild(thead);

  for (j = 0; j < objects.length; j++) {
    var tbodyTr = document.createElement('tr');
    for (k = 0; k < labels.length; k++) {
      var tbodyTd = document.createElement('td');
      tbodyTd.innerHTML = objects[j][labels[k].toLowerCase()];
      tbodyTr.appendChild(tbodyTd);
    }
    tbody.appendChild(tbodyTr);
  }
  table.appendChild(tbody);

  container.appendChild(table);
}

var labels1 = ['ID', 'Name']; 
var objects1 = [
  {"id": "1", 'name': "richard"},
  {"id": "2", 'name': "santos"}
];

var labels2 = ['ID', 'NOME'];
var objects2 = [
  {"id": "1", 'nome': "richard"},
  {"id": "2", 'nome': "adriana"}
];

var labels3 = ['ID', 'NAME', 'PLATE'];
var objects3 = [
  {"id": "1", 'name': "jetta",  'plate': "DFG-1222"},
  {"id": "2", 'name': "fusion", 'plate': "DFF-3342"}
];

buildTable(labels1, objects1, document.getElementById('a'));
buildTable(labels2, objects2, document.getElementById('b'));
buildTable(labels3, objects3, document.getElementById('c'));

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}

<div id="a"><p>Table 1</p></div>
<div id="b"><p>Table 2</p></div>
<div id="c"><p>Table 3</p></div>

这篇关于使用Javascript数组和对象创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！