[英]HTML - Convert json to table
I'm trying to convert JSON to a table, but it doesn't.我正在尝试将 JSON 转换为表格,但它没有。 Everything seems fine, but I cannot see the values in my table.一切似乎都很好,但我看不到我表中的值。
My code that converts JSON to table:我将 JSON 转换为表的代码:
$(function() {
var my_data = '';
$.each(JSON.parse(sonuc.response) , function(key, item){
my_data += '<tr>';
my_data += '<td>'+item.kod+'</td>';
my_data += '<td>'+item.ev + " - " + item.deplasman+'</td>';
my_data += '<td>'+item.oran+'</td>';
my_data += '<td>'+item.tahmin+'</td>';
my_data += '<td>'+item.tur+'</td>';
my_data += '<td>'+item.tarih+'</td>';
my_data += '<td>'+item.tarih+'</td>';
my_data += '</tr>';
});
console.log(my_data)
$('#maclar_table').append(my_data);
});
my_data output: my_data 输出:
<tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr>
my JSON Output:我的 JSON 输出:
My Table HTML Code:我的表格 HTML 代码:
<table class="table" name="maclar_table">
<thead class=" text-primary">
<th>
Kod
</th>
<th>
Takımlar
</th>
<th>
Oran
</th>
<th>
Tahmin
</th>
<th>
Tür
</th>
<th>
Tarih
</th>
<th>
Yetkiler
</th>
</thead>
</table>
You are setting the name to maclar_table, not the id.您将名称设置为 maclar_table,而不是 id。 $("#maclar_table") in jQuery gets elements with the ID of maclar_table, not the name. $("#maclar_table") 在 jQuery 中使用 maclar_table 的 ID 获取元素,而不是名称。 My suggestion for the code on line 1 of your table:我对表格第 1 行代码的建议:
<table class="table" name="maclar_table" id="maclar_table">
That should do the job.那应该可以完成这项工作。
You can use - https://www.npmjs.com/package/html-tablify您可以使用 - https://www.npmjs.com/package/html-tablify
It is that simple -就是这么简单——
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4}]
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
Output (pretty) -输出(漂亮) -
<table border=1 cellspacing=0 cellpadding=0>
<thead>
<tr> <th>a</th> <th>b</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>2</td> <td>1</td> </tr>
<tr> <td>4</td> <td> </td> </tr>
</tbody>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.