我的 Javascript 中的 For 循环 有一个小问题。这是我的代码:
$(document).ready(function() {
$.getJSON("CAN_gen_1.json", function(json) {
var tr;
for (var i = 0; i < json.messages.length; i++) {
tr = $('<tr/>');
var details = json.messages[i];
for (var j = 0; j <= details.signals.length; j++) {
tr.append("<td>" + details.signals[j].start_bit + "</td>");
tr.append("<td>" + details.signals[j].comment + "</td>");
tr.append("<td>" + details.signals[j].bit_length + "</td>");
tr.append("<td>" + details.signals[j].factor + "</td>");
tr.append("<td>" + details.signals[j].offset + "</td>");
tr.append("<td>" + details.signals[j].is_big_endian + "</td>");
tr.append("<td>" + details.signals[j].is_signed + "</td>");
tr.append("<td>" + details.signals[j].name + "</td>");
$('#table_1').append(tr);
}
}
});
});
我声明一个表行(tr)。我每次循环 json 文件时都会使用它。问题是我得到了包含所有数据的一行。
我想剪切该行以获得一个可读的表格。
查看快照: 。
最佳答案
发生这种情况是因为您只创建了一个 <tr>
每 table 。
创建您的tr
在内循环内:
$(document).ready(function() {
$.getJSON("CAN_gen_1.json", function(json) {
var tr;
for (var i = 0; i < json.messages.length; i++) {
var details = json.messages[i];
for (var j = 0; j <= details.signals.length; j++) {
tr = $('<tr/>');
tr.append("<td>" + details.signals[j].start_bit + "</td>");
tr.append("<td>" + details.signals[j].comment + "</td>");
tr.append("<td>" + details.signals[j].bit_length + "</td>");
tr.append("<td>" + details.signals[j].factor + "</td>");
tr.append("<td>" + details.signals[j].offset + "</td>");
tr.append("<td>" + details.signals[j].is_big_endian + "</td>");
tr.append("<td>" + details.signals[j].is_signed + "</td>");
tr.append("<td>" + details.signals[j].name + "</td>");
$('#table_1').append(tr);
}
}
});
});
这段代码有点笨拙。我建议分解一个函数来创建行。这样就可以清楚地知道何时需要创建它们,并且您不必不断重复 details.signals[j]
:
function tableRowForSignal(signal) {
return $('<tr />')
.append($("<td>").text(signal.start_bit));
.append($("<td>").text(signal.comment));
.append($("<td>").text(signal.bit_length));
.append($("<td>").text(signal.factor));
.append($("<td>").text(signal.offset));
.append($("<td>").text(signal.is_big_endian));
.append($("<td>").text(signal.is_signed));
.append($("<td>").text(signal.name));
}
$(document).ready(function() {
$.getJSON("CAN_gen_1.json", function(json) {
var tr;
for (var i = 0; i < json.messages.length; i++) {
var details = json.messages[i];
for (var j = 0; j <= details.signals.length; j++) {
$('#table_1').append(tableRowForSignal(details.signals[j]));
}
}
});
});
关于javascript - 如何在for循环中创建表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42783747/