Je veux générer une table HTML à partir de 2 objets donnés, mais il y a trop d'en-têtes imbriqués et je n'arrive pas à gérer.Comment générer un tableau croisé dynamique avec des en-têtes à plusieurs niveaux à partir d'Object?
Voici ce que le résultat final devrait ressembler à:
Et voici les données que je me donne pour créer la table:
var columnData = [ {Col001: "1",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "84.7"},
{Col001: "2",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "93.8"},
{Col001: "2",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Ninja Koto", ScorePct: "87.5"},
{Col001: "3",Col002: "Russell Montgomery",Col003: "Judith Rodriguez",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "90.3"},
{Col001: "4",Col002: "Russell Montgomery",Col003: "Judith Rodriguez",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Ninja Koto", ScorePct: "83.3"},
{Col001: "5",Col002: "Russell Montgomery",Col003: "Alice Butler",Col004: "Medium",Col005: "Has a Drive-Thru",Col006: "Ed Waves", ScorePct: "90.3"},
{Col001: "6",Col002: "Russell Montgomery",Col003: "Alice Butler",Col004: "Medium",Col005: "Has a Drive-Thru",Col006: "Ed Waves", ScorePct: "87.5"},
{Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "90.6"},
{Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Ed Waves", ScorePct: "68.8"},
{Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "83.3"},
{Col001: "8",Col002: "John Barnes",Col003: "Stephen Peterson",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "80.0"},
{Col001: "8",Col002: "John Barnes",Col003: "Stephen Peterson",Col004: "Large",Col005: "No Drive-Thru",Col006: "Veela Faint", ScorePct: "96.9"},
{Col001: "9",Col002: "John Barnes",Col003: "Russell Taylor",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "88.9"},
{Col001: "10",Col002: "Russell Montgomery",Col003: "Carl Perry",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ed Waves", ScorePct: "87.5"},
{Col001: "10",Col002: "Russell Montgomery",Col003: "Carl Perry",Col004: "Large",Col005: "No Drive-Thru",Col006: "Veela Faint", ScorePct: "93.8"}];
var rowData = [ {ColID:"0",ColValue:"101",RowID:"1"},
{ColID:"1",ColValue:"Varna",RowID:"1"},
{ColID:"0",ColValue:"102",RowID:"2"},
{ColID:"1",ColValue:"Dobrich",RowID:"2"},
{ColID:"0",ColValue:"103",RowID:"3"},
{ColID:"1",ColValue:"Plovdiv",RowID:"3"},
{ColID:"0",ColValue:"104",RowID:"4"},
{ColID:"1",ColValue:"Montana",RowID:"4"},
{ColID:"0",ColValue:"105",RowID:"5"},
{ColID:"1",ColValue:"Sofia",RowID:"5"},
{ColID:"0",ColValue:"106",RowID:"6"},
{ColID:"1",ColValue:"Sliven",RowID:"6"},
{ColID:"0",ColValue:"107",RowID:"7"},
{ColID:"1",ColValue:"Pomorie",RowID:"7"},
{ColID:"0",ColValue:"108",RowID:"8"},
{ColID:"1",ColValue:"Albena",RowID:"8"},
{ColID:"0",ColValue:"109",RowID:"9"},
{ColID:"1",ColValue:"Bourgas",RowID:"9"},
{ColID:"0",ColValue:"110",RowID:"10"},
{ColID:"1",ColValue:"Bansko",RowID:"10"}];
A propos de l'objet columnData:
columnData. Col001 représente chaque numéro de ligne de la table.
columnData. Col002 à columnData. Col005 sont les en-têtes de la table, où 001 est le plus haut niveau, 005 le plus bas niveau.
columnData. ScorePct Les valeurs correspondantes pour chaque ligne
propos rowData objet:
rowData. RowID - numéro de la ligne
rowData. ColID - numéro de la colonne
rowData. colvalue - la valeur correspondante
Voici la solution que je suis venu avec à ce jour:
https://jsfiddle.net/u5c21mg3/1/
J'ai réussi à construire un autre objet de ce deux (vous le verrez dans la console du jsfiddle) mais je ne peux pas l'imprimer correctement. Ou peut-être qu'il y a une meilleure façon de construire le troisième objet? Toute aide serait appréciée!