[tableau] Problème tableaux et boucles
Résolu
XecK
Messages postés
386
Date d'inscription
Statut
Membre
Dernière intervention
-
jeremy.s Messages postés 1226 Date d'inscription Statut Membre Dernière intervention -
jeremy.s Messages postés 1226 Date d'inscription Statut Membre Dernière intervention -
Etant débutant en javascript, je voulais utiliser une boucle pour créer un tableau, mais ça ne marche pas, après pas mal de recherches, je ne trouve toujours pas donc je me tourne vers vous :
Le code HTML est :
Normalement, le tableau devrais prendre la forme d'un tableau à 20 lignes et 10 colonnes :
<tr><td></td><td></td>........</tr><tr>...............
Mais je ne sais pas pourquoi, j'obtiens ceci :
<tbody><tr></tr><tr></tr>......</tbody><td></td><td></td>.........
J'ai essayé de comprendre en mettant un alert avant chaque append, mais là c'est dans le bon ordre, et la sortie toujours dans le mauvais...
Si je n'ai pas été clair, demandez moi.
Merci d'avance
$(document).ready(function() {
var tableau = new Array();
for(var i=0 ; i<20 ; i++) {
tableau[i] = new Array();
$('#main table').append('<tr>');
for(var j=0 ; j<10 ; j++) {
if (Math.round(Math.random()*10)==1) {
tableau[i][j] = 'X';
$('#main table').append('<td>X</td>');
}
else {
tableau[i][j] = ' ';
$('#main table').append('<td> </td>');
}
}
$('#main table').append('</tr>');
}
});
Le code HTML est :
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="main">
<table border="1"></table>
</div>
<script>
<!--Mon script-->
</script>
</body>
</html>
Normalement, le tableau devrais prendre la forme d'un tableau à 20 lignes et 10 colonnes :
<tr><td></td><td></td>........</tr><tr>...............
Mais je ne sais pas pourquoi, j'obtiens ceci :
<tbody><tr></tr><tr></tr>......</tbody><td></td><td></td>.........
J'ai essayé de comprendre en mettant un alert avant chaque append, mais là c'est dans le bon ordre, et la sortie toujours dans le mauvais...
Si je n'ai pas été clair, demandez moi.
Merci d'avance
A voir également:
- [tableau] Problème tableaux et boucles
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer tableau excel sur une page - Guide
4 réponses
Bonjour
Je ne m'y connais pas en jQuery, mais ça ne m'étonne qu'à moitié. Tu essayes d'insérer des <td> directement dans un élément <table>, alors qu'il faudrait les insérer dans un élément <tr>.
À ta place, je mettrais tout dans une grande chaîne, et à la fin un seul coup de innerHTML pour créer le tableau.
Je ne m'y connais pas en jQuery, mais ça ne m'étonne qu'à moitié. Tu essayes d'insérer des <td> directement dans un élément <table>, alors qu'il faudrait les insérer dans un élément <tr>.
À ta place, je mettrais tout dans une grande chaîne, et à la fin un seul coup de innerHTML pour créer le tableau.
Salut !
Le append insert directement en dessous, donc effectivement comme l'a dit le père tu insers tes tr et tes td directement dans <table>
Deplus avec le append tu rempli tu tableau en "poussant" les éléments donc tu bas le générer de bas en haut.
Le truc c'est que tu génères bien le tableau en js, mais celui en html non.
Je te propose ca :
Jérémy
Le append insert directement en dessous, donc effectivement comme l'a dit le père tu insers tes tr et tes td directement dans <table>
Deplus avec le append tu rempli tu tableau en "poussant" les éléments donc tu bas le générer de bas en haut.
Le truc c'est que tu génères bien le tableau en js, mais celui en html non.
Je te propose ca :
$(document).ready(function() {
var tableau = new Array();
for(var i=0 ; i<20 ; i++) {
tableau[i] = new Array();
var tr = '<tr>';
for(var j=0 ; j<10 ; j++) {
if (Math.round(Math.random()*10)==1) {
tableau[i][j] = 'X';
tr = tr + '<td>X</td>';
}
else {
tableau[i][j] = ' ';
tr = tr + '<td> </td>';
}
}
tr = tr + '</tr>';
$('#main table').html($('#main table').html()+tr);
}
});
Jérémy
Merci pour vos réponses, effectivement ça fonctionne comme ça, mais j'ai aussi réussi à le faire marcher en ajoutant <tbody></tbody> dans ma table, et exécuter les append sur l'élément #main table tbody, et ça marche.
Mais je crois que je vais prendre votre solution qui marche plus comme je le souhaitais.
Mais je crois que je vais prendre votre solution qui marche plus comme je le souhaitais.
