从JavaScript数组打印值

Question

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

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> 。 数组的每个部分都是一个<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/