我让下面的jQuery接收来自AJAX请求的响应,以建立一个表,但是每个表似乎都在其下面的追加之后被触发,我如何确保在每个表完成之前不关闭表。
$.ajax({
type: "POST",
url: "api/getFirmTabletsDetails.php",
data: "id=" + firmID,
cache: false,
dataType: "json",
success: function(result)
{
var tabletArea = modal.find('#tablet-body');
tabletArea.html("");
tabletArea.append
(
'<div class="col-lg-12">
<table class="table table-hover table-striped"><thead>
<tr><th>Name</th><th>Status</th><th>Address</th></tr>
</thead><tbody>'
);
if (result.success = 1)
{
$.each(result.request, function( index, value )
{
var address = value.Street + "<br>" + value.Street2 + "<br>"
+ value.Town + "<br>" + value.County + "<br>"
+ value.Postcode;
tabletArea.append('<tr><td>'+value.Name+
'</td><td>'+value.Status+'</td><td>'+address+'</td></tr>');
});
}else{
alert(result.error);
}
tabletArea.append('</tbody></table></div></div>');
}
});
输出:
<html>
<head>
<title></title>
</head>
<body>
<div class="modal-body" id="tablet-body">
<div class="col-lg-12">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Address</th>
</tr>
</thead>
</table>
</div>
<table>
<tr>
<td>...</td>
<td>...</td>
<td>...
<br />...
<br />...
<br />...
<br />...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...
<br />...
<br />...
<br />...
<br />...</td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
您使用的append
方法不正确。
正如您在官方文档中可以看到的,append( content )
带有一个可以为DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
的参数。您在这里所做的是重复传递字符串。您应该为要附加的元素传递完整的htmlString。如果您想采用与您正在执行的操作类似的方法,则可以保留字符串并继续向其中添加元素。完成后,可以一次将字符串传递给您的append(content)
方法。检查下面给出的代码:
$.ajax({
type: "POST",
url: "api/getFirmTabletsDetails.php",
data: "id=" + firmID,
cache: false,
dataType: "json",
success: function(result){
var tabletArea = modal.find('#tablet-body');
tabletArea.html("");
var htmlString = "";
htmlString += '<div class="col-lg-12"><table class="table table-hover table-striped"><thead><tr><th>Name</th><th>Status</th><th>Address</th></tr></thead><tbody>';
if (result.success = 1){
$.each(result.request, function( index, value ) {
var address = value.Street + "<br>" + value.Street2 + "<br>" + value.Town + "<br>" + value.County + "<br>" + value.Postcode;
htmlString += '<tr><td>'+value.Name+'</td><td>'+value.Status+'</td><td>'+address+'</td></tr>';
});
}else{
alert(result.error);
}
htmlString += '</tbody></table></div></div>';
tabletArea.append( htmlString );
}
});
关于javascript - jQuery table HTML输出不正确,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38565465/