如何在表格中動態顯示不同長度對象的數組？

我有對象的所有值是不同的數組：如何在表格中動態顯示不同長度對象的數組？

[ 
    {"val"::val,"xxx":"zzz","eee":"fff"}, 
    {"val":val}, 
    {val"::val,"xxx":"zzz","eee":"fff","val":val,"xxx":"zzz","eee":"fff"} 
]

有不同的屬性名稱不同的值。我試圖動態顯示它們在一個HTML表格。

這一點應該是有一個沒有標題的表，其中一行的長度可以不同於前一個，並且只顯示指定的值。

在前面的示例中，結果將是一個包含3行的表： 3行。

The first row having 3 cell 
val | zzz | fff 

second row 1 cell 
val | 

Third row 6 cell 
val | zzz | fff | val | zzz | fff

我怎麼能產生這樣的表知道我不知道任何價值的關鍵，將只需要不th顯示值和。我也無法預測文檔的長度。

來源

2016-11-10 Cam.phiefr

什麼是預期的行爲當行只要不是其他人呢？您是否期望使用rowspan來填充剩餘的空單元格，或者您是否只希望行的其餘部分爲空單元格？我不確定你想要完成什麼。 – kondrak

具有相同密鑰的值是否必須顯示在同一列下？ – H77

對象不應該有重複的屬性名稱。 ::是無效的語法。您可以將Array.prototype.forEach(),Object.keys()添加爲<tr>和<td>元素爲<table>元素。

var arr = [{ 
 
    "val": "val", 
 
    "xxx": "zzz", 
 
    "eee": "fff" 
 
}, { 
 
    "val": "val" 
 
}, { 
 
    "val": "val", 
 
    "xxx": "zzz", 
 
    "eee": "fff", 
 
    "val1": "val", 
 
    "xxx1": "zzz", 
 
    "eee1": "fff" 
 
}]; 
 

 
var table = document.querySelector("table"); 
 

 
arr.forEach(function(value, key) { 
 
    var tr = table.insertRow(); 
 
    var keys = Object.keys(value); 
 
    keys.forEach(function(prop, key) { 
 
    var td = tr.insertCell(); 
 
    td.innerHTML = value[prop] + (key < keys.length - 1 ? " | " : ""); 
 
    tr.appendChild(td); 
 
    }); 
 
});

<table> 
 
    <tbody></tbody> 
 
</table>

來源

2016-11-10 02:32:13 guest271314

如何在表格中動態顯示不同長度對象的數組？

回答

相關問題