AJAX - JS - 从 AJAX 响应创建一个表并放入<div>

Question

在这个方法中，我以文本形式传递这个操作的响应，但我想使用表格式，我该如何做？

function loadAditivos(){
$('#aditivoAbertoInformacoesTexto').html('<div id="loaderMaiorDemandante"></div>');
$("#loader").show();
var jsonHide = $('#activeJsonHide').html();
if(jsonHide) {
$.ajax({
url: 'search.action', // action to be perform
type: 'POST',       //type of posting the data
data: { dataJson: jsonHide }, // data to set to Action Class
dataType: 'text',
success: function (html) {
$("#loader").hide();
$('#showAdditiveasText').html(html); //How to pass a tablw to That DIV?
},
});
}
}

我如何将这些数据传递给div："$('#showAdditivesText'(.html(html("使用表格格式？

示例：

[
{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "[e-mail]"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "[e-mail]"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "[e-mail]"
},
{
"UserID": 4,
"UserName": "nera",
"Password": "1234",
"Country": "uk",
"Email": "[e-mail]"
}
]

Answer 1

您可以动态创建一个表，并将其附加到如下元素：

var indices = ["UserID", "UserName", "Password", "Country", "Email"]
var data = [
{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "[e-mail]"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "[e-mail]"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "[e-mail]"
},
{
"UserID": 4,
"UserName": "nera",
"Password": "1234",
"Country": "uk",
"Email": "[e-mail]"
}
];
var table = $("<table>")
var thead = $('<thead>')
for(const index of indices) {
$('<th>'+index+'</th>').appendTo(thead)
}
thead.appendTo(table)
var tbody = $('<tbody>')
for(const item of data) {
var tr = $('<tr>')
for(const index of indices) {
$('<td>'+item[index]+'</td>').appendTo(tr)
}
tr.appendTo(tbody)
}
tbody.appendTo(table)
table.appendTo('#showAdditiveasText')

<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div id="showAdditiveasText"></div>