Problème sur une boucle

Messages postés
1131
Date d'inscription
mercredi 28 août 2002
Statut
Membre
Dernière intervention
23 avril 2019
-
Bonjour,

Il y a bien longtemps que je n'ai plus fait de javacript/jquery

J'essaie de fare une boucle qui affiche des lignes dans un tableau.

Résultat souhaité:
            <tr>
                <td>Name 1</td>
                <td>20€</td>
                <td><a href="#" id="status1"></a></td>
                <td><a href="#" id="status2"></a></td>
                <td><a href="#" id="status3"></a></td>
                <td><a href="#" id="status4"></a></td>
            </tr>
            <tr>
                <td>Name 2</td>
                <td>20€</td>
                <td><a href="#" id="status5"></a></td>
                <td><a href="#" id="status6"></a></td>
                <td><a href="#" id="status7"></a></td>
                <td><a href="#" id="status8"></a></td>
            </tr>


Code utilisé:
        <script type="text/javascript">
  var  j= 1;
  while (j < 5) {
   document.write('<tr><td>Name ' + j + '</td><td>20€</td>');
    var w;
    for (w = 1; w < 5; w++) {
     document.write('<td><a href="#" id="status' + w +'"></a></td>');
    }
   document.write('</tr>');
   j++;    
  }
  </script>


J'arrive bien à affiche le nombre de ligne que je souhaite dans mon tableau, sauf que je n'arrive pas a incrementer la boucle qui ecrit 'status+w', afin que celle là s'incrémente toujours de plus 1.

Example avec 3 personnes:
            <tr>
                <td>Name 1</td>
                <td>20€</td>
                <td><a href="#" id="status1"></a></td>
                <td><a href="#" id="status2"></a></td>
                <td><a href="#" id="status3"></a></td>
                <td><a href="#" id="status4"></a></td>
            </tr>
            <tr>
                <td>Name 2</td>
                <td>20€</td>
                <td><a href="#" id="status5"></a></td>
                <td><a href="#" id="status6"></a></td>
                <td><a href="#" id="status7"></a></td>
                <td><a href="#" id="status8"></a></td>
            </tr>

            <td>Name 3</td>
                <td>20€</td>
                <td><a href="#" id="status9"></a></td>
                <td><a href="#" id="status10"></a></td>
                <td><a href="#" id="status11"></a></td>
                <td><a href="#" id="status12"></a></td>
            </tr>


Si quelqu'un peut m'éclairer...
Merci.
Burnside.

Afficher la suite 

3 réponses

Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51
0
Merci
bonjour

essai en declarant la variable avec let

let w;

Commenter la réponse de @karamel
Messages postés
355
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
15 juin 2019
5
0
Merci
Essaie d'initialiser la variable w
var w=0;

Commenter la réponse de DevLama
0
Merci
Plutôt que d'utiliser document.write(), pourquoi ne pas utiliser les objets du DOM HTML.
Dans la page HTML : Créer un élément <table> avec un élément <tr> qui contient les éléments <th> afin d'entrer les titres de colonnes.
Cela ressemble à cela:
<table id="matable">
<tr>
<th>titre1</th>
<th>titre2</th>
<th>titre3</th>
</tr>
</table>

Ensuite le code JavaScript + DOM pour créer les lignes et les cellules est le suivant:

var matable = document.getElementById("matable");
var i = 1;
var nbl = 5 // le nombre de lignes
for (i = 1; i < nbl; i++) {
var rtable = matable.insertRow(i);
var ctable =rtable.inertCell(0);
ctable.innerHTML = Name " + i;
ctable = rtable.insertCell(1);
ctable.innerHTML = "20€";
ctable = rtable.insertCell(2);
ctable.innerHTML = "<a href =\"#\" id = \"status" + i + "\"></a>";
}

Commentaire : Le caractère d'échappement (\") permet d'entrer un guillemet dans une chaîne sans l'interrompre.
Commenter la réponse de JPRVB6