如何从JSON数据打印表格？

Question

我的代码工作正常，但我无法打印从JSON值创建的表格。有什么建议么？？

var resData = {"key1":"value","key2":"value"}; 

var table = $('<html/>').append('<thead><tr><th>Filter</th><th>Values</th></tr></thead>').appendTo('body'), 
    tbody = table.append('<tbody/>'); 
$.each(resData, function(key, value){ 
    tbody.append('<tr><td>'+key+'</td><td>'+value+'</td></tr>'); 
}); 
console.log(table); 

Answer 1

只要你可以喜欢这个。

var resData = {"key1":"value","key2":"value"}; 
 

 
var table_str = '<table><thead><tr><th>Filter</th><th>Values</th></tr></thead>'; 
 
    table_str += '<tbody>'; 
 
$.each(resData, function(key, value){ 
 
    table_str +='<tr><td>'+key+'</td><td>'+value+'</td></tr>'; 
 
}); 
 
$("#content").html(table_str); 
 
console.log(table_str);

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

Answer 2

在var table先建立完整表格的HTML然后追加表体

Answer 3

您可以添加varible与价值concatinate，然后追加到html

var resData = {"key1":"value","key2":"value"}; 

var table='<table><thead><tr><th>Filter</th><th>Values</th></tr></thead><tbody><tbody/>'; 
$.each(resData, function(key, value){ 
    table+='<tr><td>'+key+'</td><td>'+value+'</td></tr>'; 
}); 
table+='</table>'; 
$('<html/>').append(table); 
console.log(table); 

Answer 4

你直接打印jQuery对象到控制台。我认为你需要表格的html内容。您需要使用console.log(table.html())。看到html() docs

Answer 5

试试这个在JavaScript：

var resData = {"key1":"value","key2":"value"}; 
 

 
var table = '<table><thead><tr><th>Filter</th><th>Values</th></tr></thead>'; 
 
table += '<tbody>'; 
 
for (var i in resData) { 
 
    table += '<tr><td>'+i+'</td><td>'+resData[i]+'</td></tr>'; 
 
} 
 
document.getElementById("table").innerHTML = table;

table,th,td { border: 1px solid black; }

<div id="table"> 
 
</div>