Dynamisch HTML-Tabelle aus JS-Array mit jQuery erstellen

Question

Ich möchte dynamisch eine HTML-Tabelle mit jQuery erstellen. Ich habe ein JS-Array mit Daten gefüllt.

Ich habe Folgendes versucht und es funktioniert nicht, nichts zeigt sich. Was mache ich falsch?

Javascript-Code

for(var i = 0; i < cycleArr.length; i++) { 
    var strTable = "<tr>" 
    for(var j = 0; j < cycleArr[i]; j++) { 
     var strTable = strTable + "<td>"; 
     var strTable = strTable + cycleArr[i]; 
     var strTable = strTable + "</td>"; 
    } 
    var strTable = strTable + "</tr>"; 
} 
$('#model_table').append(strTable); 

HTML-Code

<div id="model_table"> 

</div> 

Answer 1

Unter der Annahme, dass cycleArr ein 2-dimensionales Array (für alles andere würde dieser Code nicht viel Sinn machen, aber korrigiere mich, wenn ich falsch liege), habe ich folgende Probleme mit deinem Code gefunden:

• Sie vergleichen j mit cycleArr[i], die wahrscheinlich ein Array ist, anstelle von cycleArr[i].length.
• In der inneren Schleife greifen Sie auf cycleArr[i] statt cycleArr[i][j] zu.
• Sie überschreiben Ihre strTable Variable in jeder Iteration der äußeren Schleife, weil Sie <tr> zuweisen, anstatt es anzuhängen.
• Sie deklarieren Ihre Variable strTable immer und immer wieder. Es sollte nur einmal deklariert werden.
• Sie fügen <tr> s und <td> s in eine <div> anstelle einer <table> ein. Während dies beabsichtigt sein könnte, nahm ich an, dass es nicht ist. Hier

ist eine funktionierende Version des Codes:

var cycleArr = [['a', 'b', 'c'], ['d', 'e', 'f']]; 
 

 
var strTable = ""; 
 
for(var i = 0; i < cycleArr.length; i++) { 
 
    strTable += "<tr>" 
 
    for(var j = 0; j < cycleArr[i].length; j++) { 
 
    strTable += "<td>"; 
 
    strTable += cycleArr[i][j]; 
 
    strTable += "</td>"; 
 
    } 
 
    strTable += "</tr>"; 
 
} 
 
$('#model_table').append(strTable);

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    border: 1px solid grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="model_table"> 
 

 
</table>

Auch Sie schrieb, dass Sie eine "JSON-Array", aber es scheint Sie eine JS haben (JavaScript) -Array. Ein JSON-Array wäre eine Zeichenkette, die ein Array codiert (Sie könnten nicht darüber iterieren, bevor Sie es analysieren, wodurch es nicht mehr zu JSON wird). Ich habe mir die Freiheit genommen, Ihren Beitrag zu korrigieren, um Verwirrung zu vermeiden.

Answer 2

Ich habe den Code in eine HTML-Datei. Unten ist der Code. Beachten Sie, dass Sie Folgendes zulassen müssen:

strTable - Schleife fortsetzen, indem Sie + = hinzufügen. Einfach var strTable = strTable + "" aus dem obigen Code vereinfachen.

Die Idee hier ist, Sie haben Spalte und Zeile. Zuerst werden Sie die Richtung von links nach rechts durchlaufen, dann, wenn die Reihe abgeschlossen ist, müssen Sie zur nächsten Reihe gehen.

<div id="model_table">&npsp;</div> <!-- result here --> 

<script type="text/javascript"> 
    var cycleArr = [[1,2,3,4,5], [6,7,8,9,10]]; 
    var strTable = '<table border="1" cellpadding="5">'; 
    for(var i = 0; i < cycleArr.length; i++) { 
     strTable += "<tr>"; 
     for(var j = 0; j < cycleArr[i].length; j++) { 
     strTable += '<td>' + cycleArr[i][j] + '</td>'; 
     } 
     strTable += "</tr>"; 
    } 
    strTable += '</table>'; 

document.getElementById('model_table').innerHTML = strTable; 
</script>