Javascript 如何将表头添加到包含Ajax数据的动态生成表中？

我试图从

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=”“；
对于（变量i=0；i

HTML:

工作小提琴：

---

如果您谈论的是表头/表头。那么下面的代码对您很有帮助：

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;

var值=[{
“城市”：“喀布尔”，
“大陆”：“亚洲”，
“国家”：“阿富汗”，
“CountryAbbr”：“AF”，
“CountryId”：“102120”
}, {
“城市”：“MARIEHAMN”，
“大陆”：“欧洲”，
“国家”：“阿兰群岛”，
“CountryAbbr”：“AX”，
“CountryId”：“102115”
}];
var out=“”；
out+=“CountryCityCountry代码”//表格标题----------
对于（变量i=0；i

---

不确定你在问什么。大概您已经尝试添加标题1了？我还需要生成标题。所以

Country，City，CountryAbbr.

我不确定如何获取数据和标题。您可以动态地进行操作，但既然您已经硬编码了所需的值，那么动态地提升标题又有什么意义呢？你已经知道，你只需要添加国家。。。。如果要动态选择要显示\隐藏的列，则应同时构建标题和值单元格DynamicAllyTanks！这很好，但我将看到如何动态生成所有HTML，而不是硬编码值或标记。另一个问题。好的……然后您可以在for循环之前动态地使用JSON结果键（大陆、国家、CountryAbbr、CountryId）作为头/标题。

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

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;