Discussion :

[Naemeris]

Bonjour ! J'espère que vous allez bien

Je viens poster ici car j'ai un souci dans mon code, et malheureusement, même après des dizaines et dizaines de recherches sur le sujet, je ne trouve pas réponse. Ce problème mèle JS et HTML5, et voici le topo :

Je veux créer un tableau recensant les résultats d'une recherche. Ce tableau a un nombre fixe de colonnes, mais pas de ligne. j'ai produit le code JS suivant :

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
59
60
61
62
document.getElementById("form_rech_aff").addEventListener("submit", function(e) {
  e.preventDefault();
 
  var data = new FormData(this);
 
  var xhr = new XMLHttpRequest();
 
  xhr.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        var res = this.response;
 
        if (res && res.success) {
          console.log("Affaire identifiée !");
          document.getElementById("affNb").innerHTML = res.Data.Numaff;
          document.getElementById("affName").innerHTML = res.Data.Nomaff;
          document.getElementById("LocStataff").innerHTML = res.Data.LocStataff;
          document.getElementById("ETAff").innerHTML = res.Data.ETAff;
          document.getElementById("Typaffrech").innerHTML = res.Data.Typaffrech;
          document.getElementById("DateAffRech").innerHTML = res.Data.DateAffRech;
 
          // Recupération observations
        var EspObsArray = res.ObsEsp.ObsEsps;
        console.log(EspObsArray)
 
        const destinationINFOSOBS = document.getElementById("INFOSOBS");
        destinationINFOSOBS.innerHTML = '';
 
        EspObsArray.forEach(function(elementOBS) {
        const elementOBSESP = document.createElement('tr');
        elementOBSESP.appendChild(document.createTextNode(elementOBS));
        destinationINFOSOBS.appendChild(elementOBSESP);
        })
 
        // Recupération observations
      var NBINDArray = res.NBIND.NBINDs;
      console.log(NBINDArray)
 
      const destinationNBIND = document.getElementById("NBIND");
      destinationNBIND.innerHTML = '';
 
      NBINDArray.forEach(function(elementNBIND) {
      const elementNBINDS = document.createElement('tr');
      elementNBINDS.appendChild(document.createTextNode(elementNBIND));
      destinationNBIND.appendChild(elementNBINDS);
      })
 
 
        } else {
          alert(res.msg);
        }
      } else {
        alert("Affaire introuvable : Celle ci n'est peut être pas encore renseignée ou bien vérifiez l'orthographe. ");
      }
    }
  };
 
  xhr.open("POST", "async/rech_aff.php", true);
  xhr.responseType = "json";
  xhr.send(data);
  return false;
});

Et le code HTML correspondant est le suivant :

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
		<h3 class="major">Observations de l'affaire</h3>
 
				<table>
    						<thead>
        						<tr>
            							<td colspan="1">Espèce</td>
								<td colspan="1">Nombre</td>
								<td colspan="1">Recouvrement</td>
								<td colspan="1">Commentaire</td>
								<td colspan="1">Lieu</td>
								<td colspan="1">Date</td>
 
        						</tr>
    						</thead>
    						<tbody>
 
            							<td id="INFOSOBS"></td>
            							<td id="NBIND"></td>
								<td> BLA BLA BLA </td>
            							<td> BLA BLA BLA</td>
								<td> BLA BLA BLA</td>
            							<td> BLA BLA BLA</td>
 
    						</tbody>
			</table>

Voici mon résultat :


Mes infos s'affichent bien, pas de soucis niveau requête. Le soucis se situe dans la mise en forme de ce tableau. Je ne parviens pas a créer une seule et même ligne avec mes données insérées(sans doute car mon code JS n'est pas bon .. ) , et je ne vois pas trop comment faire. Je suppose que je pourrais tricher en définissant par CSS une hauteur de <tr> .. mais c'est bancale car mes noms d'espèces peuvent être plutôt grands.

Merci d'avance de votre aide !

Bonne journée !!!