Sujet Précédent Sujet Suivant

[tableau] Problème tableaux et boucles

Résolu/Fermé
XecK Messages postés 386 Date d'inscription mercredi 22 décembre 2010 Statut Membre Dernière intervention 26 août 2016 - 5 juin 2013 à 17:07
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 - 6 juin 2013 à 14:48
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 : 
$(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:

4 réponses

Réponse 1 / 4
Utilisateur anonyme
5 juin 2013 à 17:28
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.
0
Réponse 2 / 4
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
Modifié par jeremy.s le 5/06/2013 à 20:16
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 : 
$(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
0
Réponse 3 / 4
XecK Messages postés 386 Date d'inscription mercredi 22 décembre 2010 Statut Membre Dernière intervention 26 août 2016 54
6 juin 2013 à 11:04
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.
0
Réponse 4 / 4
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
6 juin 2013 à 14:48
Rien t'empèche de mettre un tbody ;-) Tu feras simplement :
$('#main table tbody').html($('#main table tbody').html()+tr);
0

Discussions similaires

Bibliothèque
cosjac85 -
renard bleu -

3 réponses
Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
generateur de combinaison du loto 5/90
Riccilo -
ccm81 -

3 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
Trouver le nom d'un tableau avec sa photo.
lillo56 -
zetnot -

11 réponses