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 html : 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
<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 :
Nom : tableau.jpg Affichages : 1887 Taille : 154,9 Ko

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 javascript : 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
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 javascript : 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
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é ^^