Question

我有一个看起来像这样的数组（完整列表是here）：

var verbMap = [
    {
        infinitive: "gehen",
        thirdPres: "geht",
        thirdPast: "ging",
        aux: "ist",
        pastPart: "gegangen",
        english: "go"
    },
    {
        infinitive: "gelingen",
        thirdPres: "gelingt",
        thirdPast: "gelang",
        aux: "ist",
        pastPart: "gelungen",
        english: "succeed"
    }
];

我正试图浏览每个部分并将其打印到表格中。如果我专门定位它，我可以访问其中一个值，但我需要能够将所有值打印到<td> s。数组的每个部分都是<tr>，其内部值为<td>标记。

最好的方法是什么，是否有更好的方法来设置数据并与之交互？

Answer 1

使用嵌套for循环~~创建表不应该太难（该示例使用jQuery构建元素......但你显然不必）~~：

修改

删除了jQuery，因为它似乎打扰了所有人（即使控件结构是示例的重要部分）：

var table = document.createElement('table'); for(v in verbMap){ var tr = document.createElement('tr'); for(p in verbMap[v]){ var td = document.createElement('td'); var text = document.createTextNode(verbMap[v][p]); td.appendChild(text); tr.appendChild(td); } table.appendChild(tr); }

Answer 2

尝试以下

for (var i = 0; i < verbMath.length; i++) {
  var row = document.createElement('tr'); 
  var item = verbMath[i];
  for (var prop in item) {
    if (item.hasOwnProperty(prop)) {
      var data = document.createElement('td');
      data.innerText = item[prop];
      row.appendChild(data);
    }
  }

  // Need to append the row here to the appropriate place in your DOM
}

Answer 3

Firefox不支持innerText，因此最好创建一个文本节点并将其添加到子节点。定义一个数组以保证列的顺序并在必要时可以轻松更改它也可能更好。

var table = document.getElementById("tbl"), i, j, tr, td, text;

var order = ["infinitive", "thirdPres", "thirdPast", "aux", "pastPart", "english"]

for(i=0; i<verbMap.length; i++){
    tr = document.createElement('tr');
    for(j = 0; j<order.length; j++){
         td = document.createElement('td');
         text = document.createTextNode(verbMap[i][order[j]]);
         td.appendChild(text);
         tr.appendChild(td);
    }
    table.appendChild(tr);
}

JSFiddle

Answer 4

有一些非常好的工具可用于从这些数据结构创建表。考虑使用jQuery和Datatables插件。

以下是一些链接：

jQuery：http://jquery.com/

数据表：http://datatables.net/

从JavaScript数组打印值

4 个答案: