Création d'un tableau de résultats d'une recherche

**Naemeris** · 09/08/2019, 12h22

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 : Nom : CaptureEcranTableau.JPG
Affichages : 183
Taille : 35,6 Ko

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 !!!

**CosmoKnacki** · 09/08/2019, 14h19

Avant d'aborder d'éventuels problèmes de mise en formes (ce qui est la cerise sur le gâteau), demande toi avant si la structure de ton tableau est bonne: c'est n'est pas le cas.

Chaque rangée/ligne d'un tableau doit être définie par une balise tr (t => table, r => row = rangée/ligne), ici il n'y en a aucune. C'est justement elles qui vont assurer l'alignement des cellules.

D'autre part, dans la partie <thead>, les entêtes doivent-être dans des balises th(t => table, h => header = entête) et pas dans des balises td(t => table, d => data = donnée).

https://developer.mozilla.org/fr/doc...ableaux/Basics

**Naemeris** · 09/08/2019, 14h54

Bonjour ! Merci de ta réponse !

J'ai modifié la structure du tableau comme ceci

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
<table>
    													<thead>
        													<tr>
            																		<th colspan="1">Espèce</th>
																			<th colspan="1">Nombre</th>
																			<th colspan="1">Recouvrement</th>
																			<th colspan="1">Commentaire</th>
																			<th colspan="1">Lieu</th>
																			<th colspan="1">Date</th>
 
        													</tr>
    													</thead>
    													<tbody>
														<tr>
            																		<td id="INFOSOBS"></td>
            																		<td id="NBIND"></td>
																			<td id="RECO"></td>
            																		<td> BLA BLA BLA</td>
																			<td> BLA BLA BLA</td>
            																		<td> BLA BLA BLA</td>
														</tr>
 
    													</tbody>
											</table>

Mais mon souci est toujours le même. Je lui demande d’insérer des lignes grâce a mon JS mais celles ci ne s'alignent pas entre elles. Je ne peux pas mettre des <tr> tout simplement parce que mon tableau n'est pas fixe en nombre de ligne, ici j'en ai 3 , mais parfois j'en ai 78.. Donc je passe sans doute a coté d'un truc évident, mais malheureusement je ne le vois pas >< .

**CosmoKnacki** · 09/08/2019, 15h07

Ok, c'est bon pour le header.

Le fait que tu ne saches pas à l'avance combien tu vas avoir de lignes n'a pas d'importance, tu peux en créer une nouvelle à chaque entrée.

Peux tu fournir le résultat de console.log(res) (un pas trop long si possible), histoire qu'on ait des données sur lesquelles travailler?

Autre chose, si ton tableau contient plusieurs lignes, le fait d'utiliser des id va être problématique, car en html, les ids sont uniques.

**Naemeris** · 09/08/2019, 15h33

Bien-sûr ! Voici le console.log :

Code :

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

{"success":1,"msg":"Num\u00e9ro d'affaire envoy\u00e9!","Data":{"Numaff":"1234","Nomaff":"test 2","LocStataff":"VALENCE","ETAff":"En instruction","Typaffrech":"Etude \u00e9cologique","DateAffRech":"2019-08-07"},"ObsEsp":{"ObsEsps":["Pomatoceros triqueter","Natrix coronilla","Nogagus angustulus"]},"NBIND":{"NBINDs":["56","56","56"]},"RECO":{"RECOS":["50%","50%","50%"]}}

**CosmoKnacki** · 09/08/2019, 16h25

Bon bah exception faite du coté appel ajax, sur le principe ça donnerait ça:

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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <form id="form_rech_aff"><input type="submit"/></form>
        <table id="obsAff">
            <caption>Observation de l'affaire</caption>
            <thead>
                <tr><!-- l'attribut colspan n'est utile que pour les valeurs différentes de 1 -->
                    <th>Espèce</th>
                    <th>Nombre</th>
                    <th>Recouvrement</th>
                    <th>Commentaire</th>
                    <th>Lieu</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
    <script>
var res = JSON.parse(`{
    "success":1,
    "msg":"Num\u00e9ro d'affaire envoy\u00e9!",
    "Data":{
        "Numaff":"1234",
        "Nomaff":"test 2",
        "LocStataff":"VALENCE",
        "ETAff":"En instruction",
        "Typaffrech":"Etude \u00e9cologique",
        "DateAffRech":"2019-08-07"
    },
    "ObsEsp":{
        "ObsEsps":["Pomatoceros triqueter","Natrix coronilla","Nogagus angustulus"]
    },
    "NBIND":{
        "NBINDs":["56","56","56"]
    },
    "RECO":{
        "RECOS":["50%","50%","50%"]
    }
}`);
 
document.getElementById("form_rech_aff").addEventListener("submit", function(e) {
  e.preventDefault();
  let nbrows = res.ObsEsp.ObsEsps.length, tr, td;
 
  for (let i=0; i<nbrows; i++) {
      tr = document.createElement('tr');
 
      td = document.createElement('td');
      td.appendChild(document.createTextNode(res.ObsEsp.ObsEsps[i]));
      tr.appendChild(td);
 
      td = document.createElement('td');
      td.appendChild(document.createTextNode(res.NBIND.NBINDs[i]));
      tr.appendChild(td);
 
      td = document.createElement('td');
      td.appendChild(document.createTextNode(res.RECO.RECOS[i]));
      tr.appendChild(td);
 
      td = document.createElement('td');
      td.appendChild(document.createTextNode("commentaire"));
      tr.appendChild(td);
 
      td = document.createElement('td');
      td.appendChild(document.createTextNode("lieu"));
      tr.appendChild(td);
 
      td = document.createElement('td');
      td.appendChild(document.createTextNode("date"));
      tr.appendChild(td);
 
      document.querySelector('#obsAff tbody').appendChild(tr);
  }
}, false);
 
    </script>
</html>

C'est la taille de res.ObsEsp.ObsEsps qui détermine le nombre de tour de boucle et donc de lignes puisqu'une ligne est créée à chaque tour.
La création des éléments peut sembler longue, mais tu peux la réduire soit en créant une fonction qui renvoie une cellule toute faite (genre createCell(txt)) ou en exploitant la propriété innerHTML. Si tu veux améliorer ce code, le top est de créer un fragment dans lequel tu places toutes les lignes puis tu "append" le fragment (comme ça le navigateur ne doit recomposer la page qu'une seule fois):

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
function createTextCell(text) {
    let td = document.createElement('td');
    td.appendChild(document.createTextNode(text));
    return td;
}
 
document.getElementById("form_rech_aff").addEventListener("submit", function(e) {
    e.preventDefault();
    let nbrows = res.ObsEsp.ObsEsps.length, tr, td,
        frag = document.createDocumentFragment();
 
    for (let i=0; i<nbrows; i++) {
        tr = document.createElement('tr');
        tr.appendChild(createTextCell(res.ObsEsp.ObsEsps[i]));
        tr.appendChild(createTextCell(res.NBIND.NBINDs[i]));
        tr.appendChild(createTextCell(res.RECO.RECOS[i]));
        tr.appendChild(createTextCell("commentaire"));
        tr.appendChild(createTextCell("lieu"));
        tr.appendChild(createTextCell("date"));
        frag.appendChild(tr);
    }
 
    document.querySelector('#obsAff tbody').appendChild(frag);
 
}, false);

Création d'un tableau de résultats d'une recherche

JavaScript

Vue hybride

Discussions similaires

Partager

Partager