我需要动态创建引导井，其中包含有关某些已提出的票证的特定信息，例如票证编号、票证状态等。所有这些详细信息都应从响应中动态填充。我只能使用 JavaScript。如何用纯 JavaScript 实现同样的功能？
我已成功创建引导井，但如何使用 JavaScript 动态填充每个字段的数据？
<body>
<div id="table"></div>
<script>
var ticketDetails = [
{status:"pending", App_name:"demo1", req_id:1234, Appr: "no", tct_no: "AB1234"},
{status:"approved", App_name:"demo2", req_id:654, Appr: "yes", tct_no: "AB8769"},
{status:"dispatched", App_name:"demo3", req_id:34, Appr: "yes", tct_no: "AB1241"}
];
var a = '<div class="container">';
a += '<div class="well" style="color:#fff; background-color:pink;"><div class="row">';
a += '<div class="col-xs-6">REQUEST#</div>';
a += '<div class="col-xs-6" style="text-align:right;">STATUS</div>';
a += '</div>';
a += '<div>';
a += '<div class="row">';
a += '<div class="col-xs-4">Approval</div>';
a += '<div class="col-xs-4">Approver Name</div>';
a += '<div class="col-xs-4">Ticket Number</div>';
a += '</div>' + '</div>' + '</div>';
for (var i=0; i<3; i++) {
document.getElementById("table").innerHTML += a;
}
</script>
</body>
小智 5
首先。我强烈建议您使用 map 而不是 for 循环：
const html = ticketDetails.map( item =>{
return `<div class="container">
<div class="well" style="color:#fff; background-color:pink;">
<div class="row">
<div class="col-xs-6">REQUEST#</div>
<div class="col-xs-6" style="text-align:right;">STATUS</div>
</div>
<div class="row">
<div class="col-xs-4">${item['status']}</div>
<div class="col-xs-4">${item['App_name']}</div>
<div class="col-xs-4">${item['tct_no']}</div>
</div>
</div>
</div>` ;
});
document.getElementById("table").innerHTML = html.join('');
[].map 创建一个新数组，在这种情况下是字符串数组。并且 [].Join('') 将数组连接回单个字符串。