Récupérer le numéro de ligne d'un table créé dynamiquement en JavaScript

1 pièce(s) jointe(s)

Bonjour,
Cela fait plusieurs jours que je suis bloquée sur mon code pour un projet de stage.
Je parse un fichier xml et je récupère mes données. Jusque là y a pas de soucis.
Je dois ensuite les afficher dans un tableau html qui sera lui même dans un modal. J'affiche mes données y a pas de problème. Seulement, dans la dernière colonne de mon tableau il doit y avoir un bouton "+" qui au clic sur celui-ci appel une fonction qui prend en paramètre certaines colonnes du tableau.

Voilà mon code html :

Code:

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
<body>
    <input id="SearchKeyword" name="SearchKeyword" type="text" class="form-control" value="" placeholder="Mot clé">
    <input class="btn btn-secondary" type="submit" value="Supprimer" onclick="deleteField();"><br/>
    <input class="btn btn-primary" data-toggle="modal" data-target="#myModalFicheWms" type="submit" onclick="removeElement();loadXMLDoc();" value="OK">
 
    <div id="myModalFicheWms" class="modal fade">
        <div id="modalWms" class="modal-dialog modal-lg">
 
            <div id="myModalWms" class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h1>Recherches Personnalisées</h1>
 
                </div>
                <div class="modal-body">
                    <div id="wms">
 
                    </div>
                </div>
 
                <div class="modal-footer">
 
                </div>
            </div>
        </div>
    </div>
 
    <script type="text/javascript" src="script.js"></script>
 
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
 
 
    <script type="text/javascript" src="DataTables/js/jquery.dataTables.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
 
</body>

Donc quand j'ouvre le modal ça m'appelle la fonction loadXMLDoc. Malheureusement je ne peuxt donner le lien du XML ni sont contenu mais voilà l'affichage de mon tableau :
Pièce jointe 453880

PS: les codes suivants ne sont pas très propres. Je débute en JS et Jquery donc c'est comme ça me vient après une fois que mon code marche je les optimiserai. Merci de votre compréhension ^^

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function loadXMLDoc() {
    var keyword = document.getElementById('SearchKeyword').value;
    var pathXml = monurlXML 
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
 
            var fonctionTitre = recupTitle(this, "gmd:citation");
            var fonctionDateCreation = recupDateCreation(this, "gmd:citation");
            var fonctionDateRevision = recupDateRevision(this, "gmd:citation");
            var fonctionResume = recupAbstract(this, "gmd:abstract");
            var fonctionUrlKeyword = recupUrlKeyword(this, "gmd:CI_OnlineResource");
            var fonctionUrlVersion = recupUrlVersion(this, "gmd:CI_OnlineResource");
            console.log(fonctionResume);
            addTable(fonctionTitre, fonctionDateCreation, fonctionDateRevision, fonctionResume, fonctionUrlKeyword, fonctionUrlVersion);
            pagination();
 
        }
    };
    xmlhttp.open("GET", pathXml, true);
    xmlhttp.send();
}

C'est sur la fonction addTable que ça se bloque. En fait je crée mon tableau entièrement par le js et du coup mon bouton récupère tout le temps la première ligne peut importe sur quel bouton je clique dont voici le code :

Code:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
function test(titre, keyword, version) {
    var contenu = "Titre: " + titre + "\nKeyword:" + keyword + "\nVersion: " + version;
	console.log(contenu);
 
}
 
function addTable(tabTitre, tabDateCrea, tabDateRevis, tabResume, tabUrlKeyword, tabUrlVersion) {
    var myTableDiv = document.getElementById("wms"); //je récupère la div dans laquelle je vais mettre mon tableau
    var table = document.createElement('TABLE'); //je crée la balise table
    var tabHeader = ["Titre", "Date de Création", "Date de Révision", "Résumé", "Keyword", "Version", "Ajout Couche"]; //tableau des en-tête
    table.border = '1'; //je lui applique une bordure sur toute la table
    myTableDiv.className = "table table-responsive"; //je lui applique la class paleBlueRows du css
    table.id = "paleBlueRows";
    table.className = "datatable table table-striped table-bordered";
 
 
    //création de la balise thead et tr qui va contenir l'en-tête de chaque colonne
    var thead = document.createElement('THEAD');
    var trTitle = document.createElement('TR');
    thead.appendChild(trTitle);
    table.appendChild(thead);
 
    //remplissage des balises th du tableau
    for (var i = 0; i < tabHeader.length; i++) {
        var th = document.createElement('TH');
        th.appendChild(document.createTextNode(tabHeader[i])); //je mets dans les balises th le contenu du tableau d'en-tête
        trTitle.appendChild(th);
 
    }
    var tableBody = document.createElement('TBODY'); //création de l'élément body de la de table
 
    tableBody.width = '100%'; //le tableau va prendre toute la largeur de la div
    tableBody.id = "wmsTable";
    table.appendChild(tableBody);//j'ajoute l'élément tbody dans table 
 
    //remplissage des colonnes 
    for (var j = 0; j < tabDateCrea.length; j++) {
        //création des colonnes
        var tr = document.createElement('TR');
 
 
        var td = document.createElement('TD');
        td.id = "titre";
        td.appendChild(document.createTextNode(tabTitre[j]));
        tr.appendChild(td);
 
        var td2 = document.createElement('TD');
        td2.id = "dateCrea";
        td2.appendChild(document.createTextNode(tabDateCrea[j]));
        tr.appendChild(td2);
 
        var td3 = document.createElement('TD');
        td3.id = "dateRevis";
        td3.appendChild(document.createTextNode(tabDateRevis[j]));
        tr.appendChild(td3);
 
 
        var td4 = document.createElement('TD');
        td4.id = "resume";
        td4.appendChild(document.createTextNode(tabResume[j]));
        tr.appendChild(td4);
 
        var td5 = document.createElement('TD');
        td5.id = "keyword";
        td5.appendChild(document.createTextNode(tabUrlKeyword[j]));
        tr.appendChild(td5);
 
        var td6 = document.createElement('TD');
        td6.id = "version";
        td6.appendChild(document.createTextNode(tabUrlVersion[j]));
        tr.appendChild(td6);
 
 
        var tdButton = document.createElement('TD');
        tdButton.id = "couche";
        var button = document.createElement('button');
 
        button.type = "button";
        button.id = "btnAdd" + j;
        button.className = "btn btn-default btn-sm";
 
 
        var span = document.createElement('span');
        span.id = "plus";
        span.className = "glyphicon glyphicon-plus";
 
        button.onclick = function() {
            var indice = $(this).index();
            var trRow = tableBody.getElementsByTagName("tr")[indice];
 
            console.log(trRow);
            var mycelTitre = trRow.getElementsByTagName("td")[0].innerHTML; //récupère la collone des titres
 
            var mycelKeyword = trRow.getElementsByTagName("td")[4].innerHTML; //récupère la colonne des keywords
 
            var mycelVersion = trRow.getElementsByTagName("td")[5].innerHTML; //récupère la collone des versions
 
            test(mycelTitre, mycelKeyword, mycelVersion)
 
        };
        button.appendChild(span);
        tdButton.appendChild(button);
 
        tr.appendChild(tdButton);
 
        //on les cache car on ne veut pas les afficher mais on besoin de leur contenu
        $(td5).toggle(); //cache la colonne keyword
        $(td6).toggle(); //cache la colonne version
 
        tableBody.appendChild(tr);
 
    }
 
 
    myTableDiv.appendChild(table);
 
    var row = table.rows;
    var keyword = row[0].cells[4]; //récupère la cellule de la colonne Keyword
    var version = row[0].cells[5]; //récupère la cellule de la colonne version
     //on les cache car on ne veut pas les afficher mais on a besoin du contenu
    $(version).toggle(); //cache l'en-tête version
    $(keyword).toggle(); //cache l'en-tête keyword
 
}

Donc voilà je n'arrive pas à récupérer le numero de la ligne où se trouve le bouton. J'ai essayé je ne sais combien de code mais il n'y a rien qui fonctionne. S'il y a quelqu'un qui aurait une solution ou m'expliquer pourquoi cela ne fonctionne pas, je suis preneuse car je désespère là.
Merci d'avance et désolée pour le pavé ^^

Avec Jquery il existe une méthode index() ...

Sinon il faut mettre un flag sur la ligne ou un data-line par exemple sur le bout on...

Récupérer le numéro de ligne d'un table créé dynamiquement en JavaScript

J'ai utilisé cette fonction à la ligne 88 du dernier code mais malheureusement cela me récupère toujours la première ligne.
Merci je vais chercher du côté des flags.

Non je parlais de JQUERY ...

Sinon à la construction de ton tableau colle un data-line sur les tr ou sur les boutons ...

Ok merci je vais regarder ça

Bon finalement comme le index ne fonctionnait pas j'ai fini par réussir à bidouiller un truc.
Comme l'id du bouton est incrémentée de 1 à chaque fois je récupère l'indice à la fin de l'id du bouton pour avoir le numéro de la ligne comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
button.onclick = function() {
	            var id = this.id;
	            var idButton = id.substring(6);
	            var trRow = tableBody.getElementsByTagName("tr")[idButton];
	            var mycelTitre = trRow.getElementsByTagName("td")[1].innerHTML; //récupère la collone des titres
 
	            var mycelKeyword = trRow.getElementsByTagName("td")[5].innerHTML; //récupère la colonne des keywords
 
	            var mycelVersion = trRow.getElementsByTagName("td")[6].innerHTML; //récupère la collone des versions
	            test(mycelTitre, mycelKeyword, mycelVersion)
	        }

Et du coup j'ai bien l'affichage de chaque ligne comme voulu ^^

Code:

var idButton = id.substring(6);

en espérant que ton numéro de ligne ne dépasse pas un chiffe ...

sinon tu peux passer par une regexp pour récupérer le numérique.

Code:

id.match(/\d+/)

Je modifierai ça merci.

Par contre je viens de voir un autre problème. mon tableau peut s'afficher sur plusieurs pages comment je peux faire pour qu'il se remette à zero si change de page ?
la seule solution qui me vient c'est de tester l'id si il est supérieur à 4 (limite de mon affichage) alors ça réinitialise l'indice à 0

si tu as le même nombre de lignes par page passe par le modulo ...

oui j'en aurai toujours 5 qui s'afficheront par page (0 à 4)

Edit: Du coup j'ai fais comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
button.onclick = function() {
	            // var idButton = id.substring(6);
	            var id = this.id; //permet de récupérer l'indice de l'élément cliqué
	            var idButton = id.match(/\d+/); //dans le cas où l'indice dépasse le chiffre
	            if (idButton > 4) {
	                idButton = idButton % 5;
	            }
	            var trRow = tableBody.getElementsByTagName("tr")[idButton];
	            var mycelTitre = trRow.getElementsByTagName("td")[1].innerHTML; //récupère la collone des titres
 
	            var mycelKeyword = trRow.getElementsByTagName("td")[5].innerHTML; //récupère la colonne des keywords
 
	            var mycelVersion = trRow.getElementsByTagName("td")[6].innerHTML; //récupère la collone des versions
	            test(mycelTitre, mycelKeyword, mycelVersion)
 
	        }