2017-09-20 35 views
3

我要生成从给定的2个对象HTML表格,但它有太多的嵌套的头和我似乎无法管理。如何用Object中的多级头生成数据透视表?

下面是最终的结果应该是什么样子:

enter image description here

这里是我给创建表中的数据:

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"}]; 

关于columnData对象:

columnData。 Col001代表表格的每个行号。

columnData。 Col002 to columnData。 Col005是表,其中001是最高级别,005的最低水平的头。

columnData。 ScorePct为每一行

关于rowData对象中的相应的值:

rowData。 ROWID - 数行

rowData的。 ColID - 数列

rowData的。 COLVALUE - 相应的值

这里是我想出了迄今为止的解决方案:我设法从建立另一个对象这两(你会看到它从控制台

https://jsfiddle.net/u5c21mg3/1/

jsfiddle)但我无法正确打印。或者也许有更好的方法来建立第三个对象?任何帮助将不胜感激!

回答

相关问题