-1
我寫了一個JavaScript代碼來繪製一個基於我的JSON的表。
有一些奇怪的東西。我編寫代碼來繪製出現在我的屏幕中的表格，但它沒有完全顯示。但是，如果我在console.log中聲明它，它就會完全顯示。現在怎麼了？JS沒有完全出現在屏幕上，但完全出現在console.log中
這是表和console.log的screenshoot：http://prntscr.com/g5shkn * Sry基因不imgur。
說明：
- 其從JSON渲染，你可以看到它只是有3
<tr></tr>，則user，produk A paket A和produk B paket B - 其
console.log版本從表的表，你可以看到他們有3<tr></tr>但他們有<td></td>。
如果我用我的chrome中的開發工具檢查它，它不會在那裏（這是鏈接到屏幕截圖：http://prntscr.com/g5sp7q）。如果你看到我的代碼，有一個叫做<tr class="trBot"></tr>的東西，但是在inspect session這個地方沒有trBot。
是我的javascript代碼：
$.when(
$.ajax({
type: "GET",
url: 'http://www.mocky.io/v2/598960ad410000d300820df5',
dataType: "JSON",
timeout: 10000,
success: function(result){
console.log("Ajax User berjalan, berikut adalah daftar Jumlah User dari Produk yang diterima : ");
$.each(result, function (index, el) {
console.log("jumlah user : " + el.jumlah_user + " , id jumlah user : " + el.id);
});
},
error: function(xhr, textStatus, thrownError) {
$('#prosesloaddata').hide();
$('#dialogerror').show();
$("#pesanerror1").html("Terjadi Masalah, Silahkan Periksa Kembali Koneksi Internet Anda.");
$("#pesanerror2").html(xhr.error);
$("#pesanerror3").html("");
console.log("error ketika memanggil data JSON Jumlah User dengan AJAX,", xhr.error);
}
}),
$.ajax({
type: "GET",
url: 'http://www.mocky.io/v2/5989607c410000d300820df4',
dataType: "JSON",
timeout: 10000,
success: function(result){
console.log("Ajax Paket berjalan, berikut adalah daftar nama Paket dari produk yang diterima : ");
$.each(result, function (index, el) {
console.log("nama paket : " + el.nama + " , id nama paket : " + el.id);
});
},
error: function(xhr, textStatus, thrownError) {
$('#prosesloaddata').hide();
$('#dialogerror').show();
$("#pesanerror1").html("Terjadi Masalah, Silahkan Periksa Kembali Koneksi Internet Anda.");
$("#pesanerror2").html(xhr.error);
$("#pesanerror3").html("");
console.log("error ketika memanggil data JSON Paket Produk dengan AJAX,", xhr.error);
}
}),
$.ajax({
type: "GET",
url: 'http://www.mocky.io/v2/598960cf410000d800820df7',
dataType: "JSON",
timeout: 10000,
success: function(result){
console.log("Ajax Harga berjalan, berikut adalah daftar harga dari produk yang diterima : ");
$('#prosesloaddata').hide();
$.each(result, function (index, el) {
$.each(el, function (index1, el1) {
console.log("harga paket : " + el1.harga + " , id harga paket : " + el1.id + " , tanggal efektif : " + el1.tanggal_efektif);
})
});
},
error: function (xhr, textStatus, thrownError) {
$('#prosesloaddata').hide();
$('#dialogerror').show();
$("#pesanerror1").html("Terjadi Masalah, Silahkan Periksa Kembali Koneksi Internet Anda.");
$("#pesanerror2").html(xhr.error);
$("#pesanerror3").html("");
console.log("error ketika memanggil data JSON Harga dengan AJAX,", xhr.error);
}
})
).then(function(a, b, c){
class arranger {
constructor(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
this.p = "";
}
qq() {
var packer = [],
y;
c = c[0];
for (var x = 0; x < c.length; x++) {
var wd = typeof packer[[c[x]['nama_id']]];
if (wd == "undefined") {
packer[c[x]['nama_id']] = [{
"harga": c[x]['harga'],
"jumlah_user_id": c[x]['jumlah_user_id']
}];
} else {
packer[c[x]['nama_id']].push({
"harga": c[x]['harga'],
"jumlah_user_id": c[x]['jumlah_user_id']
});
}
}
var p = "<tr>";
for (x in a[0]) {
p += "<th>" + a[0][x]['jumlah_user'] + " user</th>";
}
p += "</tr>";
for (x in b[0]) {
p += '<tr class="trTop"><td colspan="' + (a[0].length - 2) + '">' + b[0][x]['nama'] + '<td colspan="2">' + b[0][x]['masa_training'] + ' ' + b[0][x]['masa_maintenance'] + '</td></tr>';
if (typeof packer[b[0][x]['id']] !== "undefined") {
p += '<tr class="trBot">';
for (y in packer[b[0][x]['id']]) {
p += '<td>' + packer[b[0][x]['id']][y]['harga'] + '</td>';
}
p += '</tr>';
}
}
return p;
}
iii($qwe) {
this.p = $qwe;
}
zzz() {
document.getElementById('wg').innerHTML = this.p;
}
}
(function() {
var $ar = new arranger(a, b, c);
$ar.iii($ar.qq());
console.log($ar.qq());
$ar.zzz()
})();
});
PS：
- mocky.io是不是我真正的JSON API鏈接，我只是用它，因爲我的API還在本地主機，但當然，它包含相同的JSON。
- ，在screenshoot提到的
console.log是來自console.log($ar.qq());
對不起，我的英語，我在我的代碼中使用的語言，只是問我什麼，如果我在這裏寫的信息並不足夠您。多謝你們。
編輯：如果你需要它，這是我的CSS代碼：
table {
width: 100%;
display: table;
background-color:#000;
color:#fff;
padding:20px;
border-collapse:separete !important;
}
td {
padding:10px !important;
}
.trTop td:last-child {
text-align:right !important;
}
.trBot td {
text-align:right !important;
}
編輯2：我手工嘗試了（複製粘貼手動console.log到<table id="wg"></table> HTML錶行，這就是結果： http://prntscr.com/g5ssd8，這是html代碼：
<table id="wg">
<tr>
<th>1 user</th>
<th>2 user</th>
<th>5 user</th>
<th>30 user</th>
</tr>
<tr class="trTop">
<td colspan="2">Produk A Paket A
<td colspan="2">1 x 1 Jam 1 Bulan</td>
</tr>
<tr class="trBot">
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
</tr>
<tr class="trTop">
<td colspan="2">Produk A Paket B
<td colspan="2">1 x 2 Jam 1 Bulan</td>
</tr>
</table>
SRY @kloker我已經改變它，之後添加，但它仍然無法正常工作，有其他理念？ – vl14b