如何在for循環中創建表格行

Question

我有一個小問題，我的For循環在我的Javascript中。這裏是我的代碼：

$(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文件時，我都會使用它。問題是我得到一行所有的數據。

我想削減行以便有一個可讀的表。

看快照：。

Answer 1

發生這種情況是因爲您只爲每個表創建一個<tr>。

內環內創建tr S：

$(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])); 
     } 
    } 
    }); 
}); 

Answer 2

你之前開行，並與

<tr> 

和所有的附加後，你應該

</tr> 

Answer 3

你需要創建一個新的行爲每一行關閉

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>"); 

這些行中的第一行必須是裏面的循環，您可以在其中創建單元格。

Answer 4

，因爲你追加到表中的每個列循環中，您有這個問題，試試這個：

$(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>"); 
     } 
     tr.append("</tr>"); 
     $('#table_1').append(tr); 
    } 
    }); 
}); 

Answer 5

$(document).ready(function() { 
    $.getJSON("CAN_gen_1.json", function(json) { 
    for (var i = 0; i < json.messages.length; i++) { 
     var details = json.messages[i]; 
     for (var j = 0; j <= details.signals.length; j++) { 
     var 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>"); 
     tr.append("</tr>"); 
     $('#table_1').append(tr); 
     } 
    } 
    }); 
});