如何动态创建表头和正文

Question

我有以下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>';
        }
}

这是我的小提琴 https://jsfiddle.net/o2gxgz9r/9072/

你能告诉我如何展示身体

Answer 1

您尚未附加正文。

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

而且您需要在循环内使用 2 个 td。

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

https://jsfiddle.net/o2gxgz9r/9075/

Answer 2

$(document).ready(function() {
  
  var response = {
	"columns": ["Country", "DateLastModified"],
	"data": [
		[
			["IND"],
			["22:03.4"]
		],
		[
			["US"],
			["22:11.0"]
		]
	]
};
formDataTable(response);
function formDataTable(response)
{
    var allcolumns = response.columns;
    var $table = $('<table>');
    var $thead = $('<thead>').appendTo($table);
    $(allcolumns).each(function(i){
      
        var $th = $('<th>',{'html':allcolumns[i]}).appendTo($thead);
    });
    
    var allData = response.data;
    var $tbody = $('<tbody>').appendTo($table);
    $(allData).each(function(j){
      $tr = $('<tr>').appendTo($tbody);
      $(allData[j]).each(function(k){
         var $td = $('<td>',{'html':allData[j][k]}).appendTo($tr);
      });
    });
    $("#here_table").html($table);
}
  
  
  
});

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here_table"></div>

在这里你可以使用这个代码......它可能会帮助你:)

更新

在这里，您可以动态地使用绘制表的每个循环。

它将动态地获取数据，并将附加到您的HTML中。

Answer 3

像这样thead后使用after()附加$('#here_table table thead').after(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);

$(document).ready(function() {
  
  var response = {
	"columns": ["Country", "DateLastModified"],
	"data": [
		[
			["IND"],
			["22:03.4"]
		],
		[
			["US"],
			["22:11.0"]
		]
	]
};
formDataTable(response);
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 = '<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);
}
  
  
  
});

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here_table"></div>

Answer 4

只需使用JS ES6 Templates String和map

$('#here_table').html(`
    <table>
        <thead>
            ${response.columns.map(head => `<th>${head}</th>`).join('')}
        </thead>
        <tbody>
            ${response.data.map(line => `<tr>${line.map(el => `<td>${el}</td>`).join('')}</tr>`).join('')}
        </tbody>
  </table>
`)

试试吧