J'ai un tableau de valeurs en javascript comme suit:Comment générer 3x3 HTML Tableau partir d'un tableau JavaScript
var data = {"A", "B", "C", "D", "E", "F", "G", "H", "I" };
Comment puis-je générer un tableau HTML 3x3 comme suit
A B C
D E F
G H I
var data = ["A", "B", "C", "D", "E", "F", "G", "H", "I" ]; // corrected Array syntax
var table = document.createElement("table");
var i = 0;
for (var r = 0; r < 3; r++) {
var row = table.insertRow(-1);
for (var c = 0; c < 3; c++) {
var cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(data[i++]));
}
}
document.body.appendChild(table);
+1 pour utiliser DOM 'createElement' et' createTextNode'. J'ai vu beaucoup de programmeurs prendre le raccourci en utilisant une chaîne et innerHTML. Personnellement, je préfère votre approche. – Bazzz
J'ai ce même problème, sauf 4 colonnes et un nombre indéfini de lignes. J'aime que votre réponse n'utilise pas innerHtml, mais je n'arrive pas à le faire fonctionner. Même lorsque je branche le vôtre sur jsfiddle.net, rien ne s'affiche. Est-ce que le corps html doit avoir une table mise en place? – tehaaron
Oui, j'ai oublié l'argument de 'insertRow' et' insertCell'. Cela fonctionne maintenant: http://jsfiddle.net/ekaw7/ Pour vos besoins, remplacez la boucle externe 'for' par une boucle' while', qui vérifie si les données sont encore disponibles, et une vérification supplémentaire avant d'utiliser les données. Exemple: http://jsfiddle.net/ekaw7/1/ – RoToRa
var data = ["A", "B", "C", "D", "E", "F", "G", "H", "I" ];
var html = '<table><tr>';
for(var i = 0 ; i<data.length; i++){
if(i%3 == 0 && i != 0){
html+= '</tr><tr>'
}
html+='<td>'+data[i]+'</td>';
}
html+='</tr></table>';
document.write(html);
http://jsfiddle.net/DuSP5/ juste essayé celui-ci.
Avez-vous essayé quelque chose? Ce – meo
est même pas JavaScript valide ... –
var data = {...} <= object ... var data = [...] <= array – stecb