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/

你可以告诉我如何展示tbody吗

Answer 1

你没有附加身体。

 $('#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>';
        }

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

Answer 2

＆＃13;

$(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);
}
  
  
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

在这里你可以使用这段代码..它可以帮助你：）

<强>更新

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

它将动态地运行数据并将附加到您的html中。

Answer 3

使用after()追加thead之后追加$('#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);

＆＃13;

$(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);
}
  
  
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

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>
`)

Try it

如何动态创建表格thead和tbody

4 个答案: