Ajout de ligne dans un tableau d'une fenêtre modale

**Aschel** · 09/06/2017, 13h05

Bonjour,

Je suis en train de développer une page en html avec du script pour la rendre plus dynamique.
Pour l'instant, j'ai seulement un bouton qui permet d'afficher une nouvelle fenêtre. Dans cette fenêtre, je voudrais y ajouter un tableau avec différente valeur et liens (ca je sais le faire en dure).
Mon problème est que je n'arrive pas à générer ce tableau de manière dynamique.
Par exemple, j'ai une liste d'élément sous forme d'une chaine de caractère séparé par des virgules. je voudrais séparer cette chaine sur les virgules (ça marche avec split) puis insérer une ligne de tableau pour chacun des éléments de ma liste.
Voici le code que j'ai testé (juste pour réaliser cette partie) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<html>
 
<head>
    <script>
        list = "A.PT,A.FM,A.AJU,A.JC,A.SC,,A.000";
        var docs_in_folder2 = list.split(",");
        alert(docs_in_folder2.length);
        for (var i = 0; i < docs_in_folder2.length; i += 1) {
            alert(docs_in_folder2[i]);
            var newTd = document.createElement("td");
            var newContent = document.createTextNode(docs_in_folder2[i]);
            newTd.appendChild(newContent);
 
            var currentTr = document.getElementById("ListFournisseur");
            currentTr.appendChild(newTd)
            alert("fin");
        }
    </script>
</head>
 
<body>
    <table>
        <tr>
            <td style="border:solid black 1px;   border-collapse:collapse;"><a href="#Fournisseurs" style="margin-left:17px;" data-toggle="modal">Fournisseurs</a></td>
        </tr>
    </table>
 
    <div class="modal fade" id="Fournisseurs" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="overflow-y:hidden;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">Cycle fournisseurs</h4>
                </div>
                <div class="modal-body">
                    <table style="border:solid black 1px; border-collapse:collapse; text-align:center; width:100%; height:60%;">
                        <tr  id="ListFournisseur">
                            <td>
                                test
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Le problème, c'est que je n'ais jamais l'alert "fin" et qu'aucune ligne n'est rajouté dans mon tableau. Je n'ais que le message "test" que j'ai inséré dans ma fenêtre.
J'ai essayé aussi en utilisant insertBefore() à la place de appenChild et en mais cela me donne le même résultat (pas de message fin et pas de ligne ajouté)

Quelqu'un pourrait-il me dire d'où viens le problème ?
Est-ce que j'ai mal compris quelque chose ?

Merci d'avance pour vos réponses.

**badaze** · 09/06/2017, 22h00

Le problème vient de ce que ton code js est exécuté avant que l'id ListFournisseur ne soit créé.

Si tu mets ce js après le </div> du <div id="ListFournisseur"...> cela fonctionne.

**Aschel** · 12/06/2017, 15h57

Bonjour,

Merci beaucoup, cela fonctionne à merveille en plaçant le script après mon div.

Cordialement

Ajout de ligne dans un tableau d'une fenêtre modale

JavaScript

Discussions similaires

Partager

Partager