3
주어진 2 개의 개체에서 HTML 테이블을 생성하고 싶지만 너무 많은 중첩 헤더가있어 관리 할 수 없습니다. 여기 개체에서 여러 수준의 머리글을 사용하여 피벗 테이블을 생성하는 방법?
는 최종 결과가 어떻게 보일지입니다 :
그리고 여기 테이블 만들기 위해 주어진하고 데이터입니다 : columnData 개체에 대한
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. Col001은 테이블의 각 행 번호를 나타냅니다.
columnData. Col002 to columnData. Col005은 테이블의 헤더입니다. 여기서 001은 가장 높은 수준이고 005는 가장 낮은 수준입니다.
columnData. ScorePct rowData를 개체에 대한 각 행
에 해당하는 값 :
rowData를. 행 ID - 행 번호
rowData ColID - 숫자 열
rowData
https://jsfiddle.net/u5c21mg3/1/
나는이 두 (당신이에서 콘솔에 표시됩니다에서 다른 객체를 구축 관리 : - COLVALUE에 해당하는 값 여기
는 지금까지 해낸 솔루션입니다 jsfiddle)하지만 제대로 인쇄 할 수 없습니다. 아니면 세 번째 객체를 만드는 더 좋은 방법이 있을까요? 어떤 도움을 주시면 감사하겠습니다!