如何將表頭添加到包含Ajax數據的動態生成的表中？

Question

我正在嘗試動態添加JSON數據中的表頭。 我需要生成頭文件（th），以便它不是手動完成的。

我有一個很基本的工作例如：而且我熟悉JQuery解決方案，但是，我想做到這一點在JavaScript唯一的方法：

一些JSON格式的數據：

var value = [{ 
    "City": "KABUL", 
     "Continent": "ASIA", 
     "Country": "AFGHANISTAN", 
     "CountryAbbr": "AF", 
     "CountryId": "102120" 
}, { 
    "City": "MARIEHAMN", 
     "Continent": "EUROPE", 
     "Country": "ALAND ISLANDS", 
     "CountryAbbr": "AX", 
     "CountryId": "102115" 
}]; 

的JavaScript：

var out = "<table>"; 

for (var i = 0; i < value.length; i++) { 
    out += "<tr><td>" + value[i].Country + 
     "</td><td>" + value[i].City + 
     "</td><td>" + value[i].CountryAbbr + 
     "</td></tr>"; 
} 
out += "</table>"; 

document.getElementById("tableContainer").innerHTML = out; 

HTML：

<div id="tableContainer"></div> 

一個工作小提琴： dynamically generated table containing Ajax data

Answer 1

如果你正在談論表頭/ heading.then下面的代碼對你有幫助：

var value = [{ 
    "City": "KABUL", 
     "Continent": "ASIA", 
     "Country": "AFGHANISTAN", 
     "CountryAbbr": "AF", 
     "CountryId": "102120" 
}, { 
    "City": "MARIEHAMN", 
     "Continent": "EUROPE", 
     "Country": "ALAND ISLANDS", 
     "CountryAbbr": "AX", 
     "CountryId": "102115" 
}]; 

var out = "<table>"; 
out+="<tr><th>Country</th><th>City</th><th>Country Code</th></tr>";//TABLE HEADER/HEADING---------- 
for (var i = 0; i < value.length; i++) { 
    out += "<tr><td>" + value[i].Country + 
     "</td><td>" + value[i].City + 
     "</td><td>" + value[i].CountryAbbr + 
     "</td></tr>"; 
} 
out += "</table>"; 

document.getElementById("tableContainer").innerHTML = out;