Partage
  • Partager sur Facebook
  • Partager sur Twitter

tableau et fusion de colonnes

    12 mai 2022 à 9:11:47

    Bonjour,

    J'ai dans ma formation je suis bloqué sur un exercises je soit realiser un tableau avec les titre en html puis le complété en javascript par rapports au donner de mon fichier json que voici.

    [
      {
        "employee_id": 1,
        "employee_manager": null,
        "employee_lastname": "Holems",
        "employee_firstname": "Cathy",
        "employee_role": "Directrice",
        "employee_salary": 100000,
        "employee_hiredate": "2010-01-09"
      },
      {
        "employee_id": 2,
        "employee_manager": 1,
        "employee_lastname": "Mannheim",
        "employee_firstname": "Luc",
        "employee_role": "DRH",
        "employee_salary": 87500,
        "employee_hiredate": "2017-06-17"
      },
      {
        "employee_id": 3,
        "employee_manager": 2,
        "employee_lastname": "Kipré",
        "employee_firstname": "Abdou",
        "employee_role": "RH",
        "employee_salary": 42800,
        "employee_hiredate": "2017-10-09"
      },
      {
        "employee_id": 4,
        "employee_manager": 2,
        "employee_lastname": "Martin",
        "employee_firstname": "Valérie",
        "employee_role": "Comptable",
        "employee_salary": 39500,
        "employee_hiredate": "2018-03-30"
      },
      {
        "employee_id": 5,
        "employee_manager": 1,
        "employee_lastname": "Slezak",
        "employee_firstname": "Daniel",
        "employee_role": "DSI",
        "employee_salary": 75000,
        "employee_hiredate": "2011-09-09"
      },
      {
        "employee_id": 6,
        "employee_manager": 5,
        "employee_lastname": "Bahl",
        "employee_firstname": "Tarik",
        "employee_role": "Administrateur Système",
        "employee_salary": 60000,
        "employee_hiredate": "2014-04-08"
      },
      {
        "employee_id": 7,
        "employee_manager": 5,
        "employee_lastname": "Armanetti",
        "employee_firstname": "Michaël",
        "employee_role": "Administrateur Réseaux",
        "employee_salary": 60000,
        "employee_hiredate": "2014-05-06"
      },
      {
        "employee_id": 8,
        "employee_manager": 5,
        "employee_lastname": "Goldman",
        "employee_firstname": "Estelle",
        "employee_role": "Cheffe de projet",
        "employee_salary": 55000,
        "employee_hiredate": "2016-04-20"
      },
      {
        "employee_id": 9,
        "employee_manager": 5,
        "employee_lastname": "Durand",
        "employee_firstname": "Gabriel",
        "employee_role": "Chef de projet",
        "employee_salary": 55000,
        "employee_hiredate": "2016-12-02"
      },
      {
        "employee_id": 10,
        "employee_manager": 8,
        "employee_lastname": "Morel",
        "employee_firstname": "Audrey",
        "employee_role": "Développeuse",
        "employee_salary": 46500,
        "employee_hiredate": "2012-07-01"
      },
      {
        "employee_id": 11,
        "employee_manager": 8,
        "employee_lastname": "Carpentier",
        "employee_firstname": "Guillaume",
        "employee_role": "Développeur Sénior",
        "employee_salary": 58500,
        "employee_hiredate": "2010-02-03"
      },
      {
        "employee_id": 12,
        "employee_manager": 9,
        "employee_lastname": "Lefebvre",
        "employee_firstname": "Hugo",
        "employee_role": "Développeur",
        "employee_salary": 42000,
        "employee_hiredate": "2015-10-11"
      },
      {
        "employee_id": 13,
        "employee_manager": 9,
        "employee_lastname": "Sharif",
        "employee_firstname": "Sonia",
        "employee_role": "Développeuse Sénior",
        "employee_salary": 54500,
        "employee_hiredate": "2011-01-23"
      },
      {
        "employee_id": 14,
        "employee_manager": 15,
        "employee_lastname": "Fournier",
        "employee_firstname": "Sabrina",
        "employee_role": "Commerciale",
        "employee_salary": 42000,
        "employee_hiredate": "2017-10-27"
      },
      {
        "employee_id": 15,
        "employee_manager": 5,
        "employee_lastname": "Bower",
        "employee_firstname": "Sarah",
        "employee_role": "Responsable Produit",
        "employee_salary": 49500,
        "employee_hiredate": "2018-05-22"
      },
      {
        "employee_id": 16,
        "employee_manager": 8,
        "employee_lastname": "Dimario",
        "employee_firstname": "Jordan",
        "employee_role": "Développeur Junior",
        "employee_salary": 32500,
        "employee_hiredate": "2019-06-30"
      },
      {
        "employee_id": 17,
        "employee_manager": 9,
        "employee_lastname": "Macdowel",
        "employee_firstname": "Cindy",
        "employee_role": "Développeuse Junior",
        "employee_salary": 32500,
        "employee_hiredate": "2019-11-04"
      }
    ]
    

    je doit sans changer le json affichier dans un tableau en premier les EID ( id), puis le nom prenom des employé sur 1 colone pour ensuite afficher la les email qui sera pour tiger nixon par exemple T.nixon@email.com, puis le salaire que on pourra selectionner par une petite fleche dans le titre de le classer croissant decroissant ou ordre innitial, et ensuite l'année puis enfin la section action du tableau ou l'on pourra dupliqué l'employer ou le suprimé le tout en javascript 

    Le soucis c'est que je suis completement bloqué ou je ne cherche pas au bon endroits.

    voila ce que j'ai déja realisé .

    mon html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">   
        <title>Employées</title>
    
    </head>
    <body>
        <h1>LIste des employées</h1>
            <table id="tabEmployees" class="table table-striped table-hover">
                <Thead>
                    <tr>
                        <th>EID</th>
                        <th>Full Name</th>
                        <th>Email</th>
                        <th>Monthly Salary</th>
                        <th>Year of Birth</th>
                        <th>Actions</th>
                    </tr>
                </Thead>
            
            </table>
    
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    </body>
    </html>

    mon CSS

    h1{
        text-align: center;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     
    }
    
    #tabEmployees{
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }

    et enfin mon javascript

    function creerCellTd(_contenu,_element)
    {
      let maCell=document.createElement("td");
      // maCell.innerText=_contenu;
      _element.appendChild(maCell);
    }
    
    function fillTable(_donnees)
    {
      let montab=document.querySelector("#tabEmployees");
      let entete=montab.createTBody();
      let lignetitre=entete.insertRow();
      
      
     for (var key in _donnees[0]) {
     //créer cellule et metre la clé dedans et les rattacher a la ligne de titre
         creerCellTd(key,lignetitre);
       }
     
       let monBody=montab.createTBody();
    
       for (let i = 0; i < _donnees.length; i++) {
         
        let maLigne=monBody.insertRow();
        let monObjet=_donnees[i];
        for (var key in _donnees[i]) {
              
          let maCellule=maLigne.insertCell();
          maCellule.innerText=monObjet[key];
          maLigne.appendChild(maCellule);
            
          
        }
         
       }
    }
    
    
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "employees.json", true);
    xhr.responseType = "json";
    xhr.send();
    
    xhr.onload = function() {
      if (xhr.status != 200) {
        alert("Erreur" + xhr.status + ":" + xhr.statusText);
      } else {
        let data = xhr.response;
        console.log(data);
        fillTable(data);
      }
    }

    Merci de votre aides


    • Partager sur Facebook
    • Partager sur Twitter
      13 mai 2022 à 19:22:17

      Bonjour personnes pour me répondre?
      • Partager sur Facebook
      • Partager sur Twitter
        15 mai 2022 à 19:46:27

        Bonjour, est-ce que tu peux préciser ce qui ne fonctionne pas ?

        Quand j'essaie de re produire ton code de mon côté, à part le fait que les entrées n'ont pas l'air d'être remplies au bon emplacements dans la table HTML, le remplissage des données fonctionne.

        j'ai effectué le test en dehors du CSS et de la requête réseaux qui récupère les données pour ne tester que le remplissage des données dans la table HTML.

        • Partager sur Facebook
        • Partager sur Twitter

        suggestion de présentation.

          15 mai 2022 à 20:07:04

          Merci de ta reponse.

          En fait pour recuperer les données comme tu la fait j'ai pas de soucis de mon coté. Mais il me faudrais sans toucher au fichier json pouvoir en javascript avoir sur la 1er collonne les ID la deuxiemme colonone il faudrais fusionner les nom et prenom je bloque car dans le jison il y a en deuxiemme employé manager que j'ai pas besoin.

          • Partager sur Facebook
          • Partager sur Twitter
            16 mai 2022 à 3:20:48

            Je pense qu'il te faut une fonction Javascript qui fasse l'association entre l'index de la colonne est la valeur à afficher.

            Une fonction qui du coup prendrait en paramètre l'index de la colonne et l'objet dans le quel prendre les données, et qui dirait quelque chose comme:

            si l'index est égal à 0 alors je retourne la propriété employee_id de l'objet, car la première colonne affiche les id, ect.. .

            Une illustration de cette fonction pourrait être:

            function getValueFromIndex(index, _object) {
              switch(index) {
                case 0: // EID
                  return _object["employee_id"];
                case 1: // full name
                  return (_object["employee_firstname"] + " " + _object["employee_lastname"])
                case 2: // email
                  // devrait retourné l'email ici
                  // mais elle n'est pas présente dans les données
                  return "<EMAIL>";
                case 3: // salaire mensuel
                  return _object["employee_salary"];
                case 4: // date de naissance
                  return _object["employee_hiredate"]
                case 5: // les "actions"
                  // devraits retourné la valeur pour la colonne "Actions"
                  // mais elle n'est pas explicitement présente dans les données
                  return "<ACTIONS>";
                default:
                  // l'index ne correspond à aucune colonne connue
                  throw new Error(`la colonne n°${index+1} est inconnue.`);
              }
            }

            Là où il faudra remplacer "<ACTIONS>" et "<EMAIL>" par les vraies valeur, que je ne connais pas car elle ne sont pas explicitement présente dans la structure de données.

            Cette fonction là getValueFromIndex doit normalement te permettre de remplacer ce code là:

                for (var key in _donnees[i]) {
            
                  let maCellule = maLigne.insertCell();
                  maCellule.innerText = monObjet[key];
                  maLigne.appendChild(maCellule);
            
                }

            Qui fonctionne mais ajoute les valeurs indépendamment des colonnes, par ce code là:

            for(let j = 0, numberOfColumns = 6; j < numberOfColumns; j++) {
                  let maCellule = maLigne.insertCell();
                  let maValeur = getValueFromIndex(j, monObjet);
                  maCellule.innerText = maValeur;
                  maLigne.appendChild(maCellule)
            }

            Qui fait la même chose mais qui va déléguer la prise de valeur à la fonction qui a "conscience" des noms de colonnes.


            -
            Edité par SamuelGaborieau3 16 mai 2022 à 3:22:19

            • Partager sur Facebook
            • Partager sur Twitter

            suggestion de présentation.

              19 mai 2022 à 10:24:28

              Merci pour ta réponse qui fonctionne a auquel j'ai reussi a faire ceci: 
              MON HTML:
              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <link rel="stylesheet" href="style.css">
                  <script src="script.js" defer></script>
                  <script src="https://kit.fontawesome.com/61ab03ba61.js" crossorigin="anonymous"></script>
                  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">   
                  <title>Employées</title>
              </head>
              <body>
                  <h1>LIste des employées</h1>
                      <table id="tabEmployees" class="table table-striped table-hover">
                          <Thead>
                              <tr>
                                  <th>EID</th>
                                  <th>Full Name</th>
                                  <th>Email</th>
                                  <th id="salary">Monthly Salary
                                      <i class="fa-solid fa-sort"></i>
                                      <input type="button" value="croissant" id="croissant" name="croissant">
                                      <input type="button" value="décroissant" id="decroissant" name="decroissant">
                                  </th>
                                  <th>Year of Birth</th>
                                  <th>Actions</th>
                              </tr>
                          </Thead>
                      </table>
                  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
                  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
              </body>
              </html>
              MON CSS:
              h1{
                  text-align: center;
                  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
              }
              #tabEmployees{
                  width: 70%;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 50px;
              }
              .btn-primary{
              margin-right: 10px;
              }
              MON JSON: qui lui et inchanger et je n'ai toujours pas le drois de le modifier.
              Et mon javascript:
              function creerCellTitre(_contenu, _element) {
                let maCell = document.createElement("td");
                _element.appendChild(maCell);
              }
              let mesDonnees = [];
              let init = false;
              function fillTable(_donnees) {
                mesDonnees = _donnees;
                let montab = document.querySelector("#tabEmployees");
                let monBody = montab.createTBody();
                monBody.setAttribute("id", "corps");
                    for (let i = 0; i < _donnees.length; i++) {
                        let maLigne = monBody.insertRow();
                        let monObjet = _donnees[i];
                        maLigne.setAttribute("id","ligne"+monObjet.employee_id);
                        for (let i = 0; i <= 5; i++) {
                            switch (i) {
                                case 0:
                                    let cell1 = maLigne.insertCell();
                                    cell1.innerText = monObjet.employee_id;
                                    break;
                                case 1: let cell2 = maLigne.insertCell();
                                    cell2.innerText = monObjet.employee_firstname + " " + monObjet.employee_lastname;
                                    break;
                                case 2:
                                    let cell3 = maLigne.insertCell();
                                    cell3.innerText = (monObjet.employee_firstname.substring(0, 1)).toLowerCase() + "." + (monObjet.employee_lastname).toLowerCase() + "@email.com";
                                    break;
                                case 3: let cell4 = maLigne.insertCell();
                                    cell4.innerText = ((monObjet.employee_salary / 12).toFixed(2));
                                    break;
                                case 4:
                                    let cell5 = maLigne.insertCell();
                                    cell5.innerText = monObjet.employee_hiredate.substring(0, 4);
                                    break;
                                case 5:
                                    let cell6 = maLigne.insertCell();
                                    let monBtnd = document.createElement("input");
                                    monBtnd.setAttribute("type", "button");
                                    monBtnd.setAttribute("class", "btn btn-primary");
                                    monBtnd.setAttribute("id", "btnd" + monObjet.employee_id);
                                    monBtnd.value = "Duplicate";
                                    cell6.appendChild(monBtnd);
                                    let monbtnde = document.createElement("input");
                                    monbtnde.setAttribute("type", "button");
                                    monbtnde.setAttribute("id", "btnde" + monObjet.employee_id);
                                    monbtnde.setAttribute("class", "btn btn-danger");
                                    monbtnde.value = "Delete";
                                    cell6.appendChild(monbtnde);
                                    break;
                                default:
                                    break;
                            }
                        }
                        document.getElementById("btnd"+monObjet.employee_id).addEventListener("click",function () {
                      let dupliquerLigne=document.querySelector("#ligne"+monObjet.employee_id);
                      dupliquerLigne.slice();
                        })
                        document.getElementById("btnde" + monObjet.employee_id).addEventListener("click",function () {
                 let remove1=document.querySelector("#ligne"+monObjet.employee_id);
                 remove1.remove();
                })
                    }
                let footer = montab.createTFoot();
                footer.setAttribute("id", "pied");
                    let derligne = footer.insertRow();
                    for (let i = 0; i <= 5; i++) {
                        if (i == 0) {
                            let total = _donnees.length;
                            let maCell = derligne.insertCell();
                            maCell.innerText = total;
                        } else if (i == 3) {
                            let somme = 0;
                            for (let j = 0; j < _donnees.length; j++) {
                                somme += _donnees[j].employee_salary;
                            }
                            let cellsomme = derligne.insertCell();
                            cellsomme.innerText = somme + " €";
                        } else {
                            let cellvide = derligne.insertCell();
                            cellvide.innerText = " ";
                        }
                    }   
              }
              function trierData(_mesDonnees) {
                let sorties = _mesDonnees.sort(function (a, b) {
                    return a.employee_salary - b.employee_salary;
                })
                return sorties;
              }
              function trierDatadecroissant(_mesDonnees) {
                let sorties = mesDonnees.sort(function (b, a) {
                    return a.employee_salary - b.employee_salary;
                })
                return sorties;
              }
              let xhr = new XMLHttpRequest();
              xhr.open("GET", "employees.json", true);
              xhr.responseType = "json";
              xhr.send();
              xhr.onload = function () {
                if (xhr.status != 200) {
                    alert("Erreur" + xhr.status + ":" + xhr.statusText);
                } else {
                    let data = xhr.response;
                    // console.log(data);   
                    fillTable(data);
                }
              }
              document.getElementById("croissant").addEventListener("click", function () {
                let reservoir = trierData(mesDonnees);
                //console.log(reservoir);
                let tabBody = document.querySelector("#corps");
                tabBody.remove();
                let tabPied = document.querySelector("#pied");
                tabPied.remove();
                fillTable(reservoir);
              })
                document.getElementById("decroissant").addEventListener("click", function () {
                    let reservoir = trierDatadecroissant(mesDonnees);
                    let tabPied = document.querySelector("#pied")
                    tabPied.remove();
                    let tabBody = document.querySelector("#corps");
                    tabBody.remove();
                    fillTable(reservoir);
                })
              J'ai cependant encore 2 probleme pour finir mon exo: je tente de faire une fonction dupliquer et suprimer lier a un click sur des boutons, Or si j'ai reussi a faire la fonction supprimer. la fonction dupliqué que j'ai tenté de faire avec une methode .slice ne fonctionne pas .
              le soucis suivant c'est que j'arrive a trier le tableau dans 2 bouton different ( croissant et décroissant) mais a coté je doit avoir un boutton sor(<iclass="fa-solid fa-sort"></i>)
              et quand on click dessu sa doit trier la 1er foit en ordre croissant, 2 éme décroissant et 3eme remetre le tableau en ordre original.
              Edit: je n'arrive pas a metre lle code dans la balise code pour facilité la lecture 

              -
              Edité par denisalb 19 mai 2022 à 10:32:46

              • Partager sur Facebook
              • Partager sur Twitter

              tableau et fusion de colonnes

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown