1 pièce(s) jointe(s)
Création d'un tableau de résultats d'une recherche
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:
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:
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 : Pièce jointe 496504
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 !!!
