Jquery 如何动态创建表格thead和tbody

我有下面的JSON作为响应，我试图从循环中创建一个表

{
    "columns": ["Country", "DateLastModified"],
    "data": [
        [
            ["IND"],
            ["22:03.4"]
        ],
        [
            ["US"],
            ["22:11.0"]
        ]
    ]
}

我已尝试如下所示

function formDataTable(response)
{
        // forming table header     
        var allcolumns = response.columns;
        var html = "<table><thead>"
        for (var i = 0; i < allcolumns.length; i++)
        {
                html += '<th>' + allcolumns[i] + '</th>';
        }
        html += "</thead></table>"
        $('#here_table').html(html);
        // forming table header ends 


        var alldata = response.data;
        var alldatahtml = '';
        for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<td>' + alldata[j] + '</td>';
        }
}

函数formDataTable（响应）
{
//成形台头
var allcolumns=response.columns；
var html=“”
对于（var i=0；i

这是我的小提琴

---

您能告诉我如何显示正文吗？您还没有附加正文

 $('#here_table table').append(alldatahtml);

而且你还需要2个tds在循环中

for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<tr>';
                alldatahtml += '<td>' + alldata[j][0] + '</td>';
                alldatahtml += '<td>' + alldata[j][1] + '</td>';
                alldatahtml += '</tr>';
        }

for（var j=0；j

使用

after（）

append after

thead

如下

$（“#此处"表格thead”）。after（alldatahtml）

只需使用
JS ES6模板字符串
和
映射

$（'here#u table'）.html(`
${response.columns.map（head=>`${head}`）.连接（“”）}
${response.data.map（line=>`${line.map（el=>`${el}`））.join（“”）}`）.join（“”）}
`)


$（文档）.ready（函数（）{
var响应={
“列”：[“国家”，“DateLastModified”]，
“数据”：[
[
[“IND”]，
["22:03.4"]
],
[
[“美国”]，
["22:11.0"]
]
]
};
formDataTable（响应）；
函数formDataTable（响应）
{
var allcolumns=response.columns；
变量$table=$（''）；
var$thead=$（''）.appendTo（$table）；
$（所有列）。每个（函数（i）{
var$th=$（''，{'html'：allcolumns[i]}）；
});
var allData=response.data；
变量$tbody=$（''）.appendTo（$table）；
$（所有数据）。每个（函数（j）{
$tr=$（''）.appendTo（$t正文）；
$（所有数据[j]）。每个（函数（k）{
var$td=$（''，{'html'：allData[j][k]}）；
});
});
$（“#here_table”）.html（$table）；
}
});
thead{color:green；}
tbody{颜色：蓝色；}
tfoot{color:red；}
表，th，td{
边框：1px纯黑；
}

您可以检查并看到它将在表结束后追加。因为他把close标记放在了早期的html+=“这不是一个动态的解决方案。您使用了
alldatahtml+=''+alldata[j][0]+''；alldatahtml+=''+alldata[j][1]+''0和1。如果有大量数据怎么办？您需要在thead之后追加如下$（“#here#u table thead”）。在（alldatahtml）之后；对不起，我忘了加入（“”）
。检查更新或尝试更新
var alldata = response.data;
        var alldatahtml = '<tbody>';
        for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<tr><td>' + alldata[j][0] + '</td><td>' + alldata[j][1] + '</td></tr>';
        }

        alldatahtml+='</tbody>';

       $('#here_table table thead').after(alldatahtml);