Je vous ai rédigé un long document sur le projet Calendrier
TD : création d’éléments
On désire à partir d’un objet afficher un tableau !
const PERSON = [
{name: "dupont", age:52, country: "Tanzania"},
{name: "tintin", age:"infinie", country: "World"},
];
Voici la structure à créer dynamiquement
Compléter le code : ?
// data est l’objet un tableau d’objet.
function buildTable(data) {
const table = document.?("table");
// récupération des entêtes
const fields = Object.keys(data[0]);
// fields = ["name", "age", "country"]
// création de la ligne tr qui contiendra les th
const headRow = document.? ("tr");
// faire un foreach sur fields pour créer le th
fields.?(function(field) {
const headCell = document.?("th");
// mettre le texte de headCell égale à fields
headCell.? = field;
// ajouter headCell à headRow
headRow.?(headCell);
});
// ajouter headRow à table
table.?(headRow);
// ajouter une ligne du tableau par objet de data
// faire un forEach sur data
data.?(function(object) {
// créer un tr
const row = document.?("tr");
// pour chaque champ (name,age,country)
fields.?(function(field) {
// création d’une case td
const cell = document.?("td");
// ajouter le texte de l’objet à la case { name: "dupont", age:52, country: "Tanzania" },
cell.? = object[field];
// cas des nombres !
if (typeof object[field] == "number")
cell.style.cssText = "background-color:black;color:white;text-align:right;"
// ajout à la row la cell
?.appendChild(?);
});
// ajout de la row au tableau
table.?(row);
});
//retourne le tableau !
return ?;
}
document.body.appendChild(buildTable(PERSON));
Amélioration
que pensez vous de ce code !
Inscription à :
Articles (Atom)