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.
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.
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);
}
}
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.
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.
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à:
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
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.