您好，我的页面中有一个引导表，我正在通过 ajax 获取一些数据以创建一些行。但是，当从 ajax 解析数据时，表格没有任何样式。但是，当我将来自 ajax 的相同 html 代码粘贴到我的 php 文件中并将其加载到浏览器上时，它显示得很好。这是js函数，但没有错误。我显然遗漏了一些关于引导加载动态内容的信息？
$(document).ready(function () {
new request('records', {
column: 'id',
order: 'DESC'
}, processReply);
});
function processReply(data) {
this.createRow = function () {
return document.createElement('tr');
}
this.createCell = function () {
return document.createElement('td');
}
this.container = document.getElementById('records-table')
for (i = 0; i < data.length; i++) {
var tr = this.createRow();
for (prop in data[i]) {
var td = this.createCell();
td.innerHTML = data[i][prop];
tr.appendChild(td);
}
container.appendChild(tr);
}
}
function request(cmd, args, callback) {
var req = $.ajax({
url: "/api/" + cmd,
type: "POST",
data: {
params: args
},
dataType: "json"
});
req.done(function (reply) {
callback(reply);
});
req.fail(function (jqXHR, textStatus) {
//alert( "Request failed: " + textStatus );
console.log(jqXHR);
});
req.always(function () {
console.log('Ajax complete!');
});
}
这是ajax完成后的完整html：
<div class="row">
<div class="records table-responsive">
<table id="records-table" class="table table-bordered table-condensed table-striped table-hover tablesorter">
<tr>
<td>
10
</td>
<td>
2013-12-26 10:45:27
</td>
<td>
KIO-6729
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
20
</td>
<td>
4
</td>
<td>
16
</td>
<td>
2
</td>
<td>
2
</td>
<td>
4
</td>
<td>
Varkiza
</td>
<td>
Glyfada
</td>
<td>
2
</td>
</tr>
<tr>
<td>
9
</td>
<td>
2013-10-06 08:32:52
</td>
<td>
KIO-6729
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
8
</td>
<td>
1
</td>
<td>
7
</td>
<td>
2
</td>
<td>
1
</td>
<td>
4
</td>
<td>
P.Falliro
</td>
<td>
Voula
</td>
<td>
2
</td>
</tr>
<tr>
<td>
6
</td>
<td>
2013-10-08 21:35:23
</td>
<td>
KIO-6729
</td>
<td>
Lefteris
</td>
<td>
Xourmouzis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
40
</td>
<td>
5
</td>
<td>
30
</td>
<td>
4
</td>
<td>
1
</td>
<td>
4
</td>
<td>
Mesogeiwn
</td>
<td>
Rafina
</td>
<td>
2
</td>
</tr>
<tr>
<td>
5
</td>
<td>
2013-10-10 15:19:45
</td>
<td>
KIO-6729
</td>
<td>
Lefteris
</td>
<td>
Xourmouzis
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
15
</td>
<td>
2
</td>
<td>
13
</td>
<td>
4
</td>
<td>
2
</td>
<td>
4
</td>
<td>
Gkazi
</td>
<td>
Ilioupoli
</td>
<td>
2
</td>
</tr>
<tr>
<td>
4
</td>
<td>
2013-10-08 14:26:47
</td>
<td>
YOE-1284
</td>
<td>
Tasos
</td>
<td>
Papadopoulos
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
20
</td>
<td>
5
</td>
<td>
15
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
Peristeri
</td>
<td>
Gkizi
</td>
<td>
3
</td>
</tr>
<tr>
<td>
3
</td>
<td>
2013-10-08 07:49:22
</td>
<td>
XYZ-9870
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Alexia
</td>
<td>
Manda
</td>
<td>
20
</td>
<td>
3
</td>
<td>
17
</td>
<td>
2
</td>
<td>
3
</td>
<td>
1
</td>
<td>
Peiraias
</td>
<td>
Athina kedro
</td>
<td>
3
</td>
</tr>
<tr>
<td>
2
</td>
<td>
2013-10-02 09:47:26
</td>
<td>
EYX-3464
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
40
</td>
<td>
5
</td>
<td>
35
</td>
<td>
2
</td>
<td>
1
</td>
<td>
2
</td>
<td>
kalamaki
</td>
<td>
glyfada
</td>
<td>
2
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2013-10-16 18:26:43
</td>
<td>
EYX-3464
</td>
<td>
Tasos
</td>
<td>
Papadopoulos
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
50.9
</td>
<td>
20.9
</td>
<td>
30
</td>
<td>
1
</td>
<td>
2
</td>
<td>
2
</td>
<td>
braxami
</td>
<td>
megalo peuko
</td>
<td>
2
</td>
</tr>
</table>
</div>
</div>
更新
更改代码并使用 innerHTML 而不是 createElement 似乎可以解决问题，并且 ajax 加载的表在所有引导程序样式中都可以正常呈现。但是我不知道 createELement 不会发生这种情况。