BC471Chapter 57Application: Transforming XML Dataheaders (which are hard-wired (Personal web server)
BC471Chapter 57Application: Transforming XML Dataheaders (which are hard-wired in the document s HTML). Composing an 11-column tablerequires a bit of code, and the drawTextTable() s length attests to that fact. You can tell byjust glancing at the code, however, that for big chunks of it, there is a comfortable regularitythat is aided by the JavaScript object that holds the data. Additional calculations take place while the table s elements are being added to the tableelement. Column totals are accumulated during the table assembly (row totals are calculatedas the object is generated and preserved as properties of the object). A large forloop cyclesthrough each (sorted) row of the dbarray; each row of the dbarray corresponds to a row of the table. Class names are assigned to various rows or cells so that they will pick up thestylesheet rules defined earlier in the document. Another subtlety of this version is that theregionproperty of a sales rep is assigned to the titleproperty of a row. If the user pausesthe mouse pointer anywhere in that row, the name of the region pops up briefly. function drawTextTable() { var newRow; var accumQ1F = 0, accumQ1A = 0, accumQ2F = 0, accumQ2A = 0; var accumQ3F = 0, accumQ3A = 0, accumQ4F = 0, accumQ4A = 0; deleteRows(document.getElementById( mainTableBody )); for (var i = 0; i < db.length; i++) { newRow = document.getElementById( mainTableBody ).insertRow(i); newRow.className = db[i].region; newRow.title = db[i].region + Region ; appendCell(newRow, rep , db[i].firstName + + db[i].lastName); appendCell(newRow, Q1 , db[i].sales.Q1_2000.forecast +
+ db[i].sales.Q1_2000.actual); appendCell(newRow, Q1 , db[i].sales.Q1_2000.quotaPct + % ); appendCell(newRow, Q2 , db[i].sales.Q2_2000.forecast +
+ db[i].sales.Q2_2000.actual); appendCell(newRow, Q2 , db[i].sales.Q2_2000.quotaPct + % ); appendCell(newRow, Q3 , db[i].sales.Q3_2000.forecast +
+ db[i].sales.Q3_2000.actual); appendCell(newRow, Q3 , db[i].sales.Q3_2000.quotaPct + % ); appendCell(newRow, Q4 , db[i].sales.Q4_2000.forecast +
+ db[i].sales.Q4_2000.actual); appendCell(newRow, Q4 , db[i].sales.Q4_2000.quotaPct + % ); accumQ1F += db[i].sales.Q1_2000.forecast; accumQ1A += db[i].sales.Q1_2000.actual; accumQ2F += db[i].sales.Q2_2000.forecast; accumQ2A += db[i].sales.Q2_2000.actual; accumQ3F += db[i].sales.Q3_2000.forecast; accumQ3A += db[i].sales.Q3_2000.actual; accumQ4F += db[i].sales.Q4_2000.forecast; accumQ4A += db[i].sales.Q4_2000.actual; appendCell(newRow, repTotal , db[i].totalForecast +
+ db[i].totalActual); appendCell(newRow, repTotal , db[i].totalQuotaPct + % ); } newRow = document.getElementById( mainTableBody ).insertRow(i); newRow.className = QTotal ; newRow.title = Totals ; appendCell(newRow, grandTotalLabel , Grand Total ); appendCell(newRow, Q1 , accumQ1F +
+ accumQ1A); appendCell(newRow, Q1 , getPercentage(accumQ1A, accumQ1F) + % ); appendCell(newRow, Q2 , accumQ2F +
+ accumQ2A); appendCell(newRow, Q2 , getPercentage(accumQ2A, accumQ2F) + % ); appendCell(newRow, Q3 , accumQ3F +
+ accumQ3A); appendCell(newRow, Q3 , getPercentage(accumQ3A, accumQ3F) + % ); appendCell(newRow, Q4 , accumQ4F +
+ accumQ4A);