樞軸表和分配單元格值

Question

我正在學習Javascript，並且創建了一個表，該表爲我提供了從MySQL生成的一段時間的平均值。輸出看起來像這樣︰

Time   C  W   T    C2   T2 
00:00:00 5.8  22.4  12.3  18.8  1.9 
00:15:00 7.5  21.4  13.3  16.6  2.5 
00:30:00 6.2  16.1  10.9  10.9  2.1 
00:45:00 12.8 14.2  7.0  12.1  4.3 

我基本上拉我的數據從一個PHP文件，然後替換/拆分數據所以這樣做。我將它們拆分成行，添加HTML，然後將它們切成單元格，並再次用HTML回顯出來。我的代碼部分看起來是這樣的：

 var lines = data.replace(/\r\n/g, "\n").split("\n"); 
    var outPut = "<table class='timetable'>"; 
    outPut += "<tr><th>T</th><th>C</th><th>W</th><th>T</th><th>C2</th><th>T2</th></tr>"; 
    for (var i = 0; i < lines.length; i++) { 
     outPut += "<tr>"; 
     var cells = lines[i].split("|"); 
     for (var j = 0; j < cells.length; j++) { 
      outPut += "<td>" + cells[j] + "</td>"; 
     } 
     outPut += "</tr>"; 
    } 
    outPut += "</table>"; 
    console.log("Cells!"); 

    $("#report").append(outPut); 
    $("#report td:contains(':')").css("background-color", "#ae1036").css("color", "#FFFFFF"); 

我必須控制這個功能，並增加了表（如爲用戶喜歡比較的緣故很多次）按鈕。那個按鈕是：

<button type="button" onclick="generateReport();">Add Projection</button> 

然後，我有一個按鈕來清除頁面：

<button type="button" onclick="clearReport();">Clear</button> 

我所想要做的就是我的轉動整個表，所以時間的推移在頂部。另外 - 對於MySQL輸出，如果平均值爲0 - 不存在數據並且跳過時間（例如00:45至02:30）。我需要包括那些零。另外 - 我將需要在每個單元格的底部和側面總計。我知道我需要很多 - 但我真的需要一些方向 - 在這一點上，我不知道該怎麼去做。

終端產品將是這個樣子：

     00:00  00:15  00:30  00:45  01:00  01:15  01:30  01:45  02:00  02:15  Total 
        1.5   1.8   9.5   15.0  13.2  5.4   4.3   7.5   9.5   6.5    74.2 
Totals:   1.5   1.8   9.5   15.0  13.2  5.4   4.3   7.5   9.5   6.5    74.2 

，然後當我再次apend，它應該更像：

     00:00  00:15  00:30  00:45  01:00  01:15  01:30  01:45  02:00  02:15  Total 
        1.5   1.8   9.5   15.0  13.2  5.4   4.3   7.5   9.5   6.5    74.2 
        1.1   1.2   9.3   15.0  13.2  5.1   4.3   7.4   9.6   6.8    72.0 
Totals:   2.6   3.0   18.8  30.0  26.4  10.5  8.6   14.9  19.1  19.3   146.2 

我想也許我可以使表頭和然後將每個值分配給由時間鏈接的數組作爲主鍵？但我沒有看到這樣的事情。我在JavaScript中讀到，對象是一組鬆散的屬性和值 - 本質上是關鍵/值對...因此，我確信它的某些我沒有想到的 - 曾經在PHP中佔有一段時間。

Answer 1

這是一個很大的編輯

您可以測試的jsfiddle =>http://jsfiddle.net/rqKUH/30/此解決方案。該解決方案假定有一個標題行，一個有總計空格的頁腳行，以及總計最右邊的一列。這些假設可以通過更改選擇器輕鬆改變。您也可以將總和更改爲另一個功能。

我的表：

<table id="report"> 
<tr> 
    <th >&nbsp;</th><th>H1</th><th >h2</th> 
    <th >h3</th><th>Total</th> 
</tr> 
<tr> 
    <td >R1</td><td>2</td><td>32</td><td>1</td><td ></td> 
</tr> 
<!-- rows removed for brevity --> 
<tr> 
    <td >R5</td><td>100</td><td>5</td><td>15</td><td ></td> 
</tr> 
<tr> 
    <td >Total</td><td ></td><td ></td><td ></td><td></td> 
</tr>  
</table> 
<button id="pivot">pivot</button> 

代碼：

$('#pivot').click(function() { 
     var saveElems = [], 
      i = 0, j = 0, $tbl, $row, colMax = 0, rowMax; 

     $tbl = $('#report'); 
     $('#report tr').each(function() { 
      saveElems[i] = []; 
      j = 0; 
      $(this).children().each(function() { 
       saveElems[i][j] = this; 
       j++ 
      }); 
      i++; 
     }); 

     rowMax = saveElems.length; 
     for (var i = 0, il = rowMax; i < il; i++) { 
      colMax = Math.max(colMax, saveElems[i].length); 
     } 
     $tbl.children().remove(); 

     for (var i = 0, il = colMax; i < il; i++) { 
      $tbl.append($row = $('<tr />')); 
      for (var j = 0, jl = rowMax; j < jl; j++) { 
       if (saveElems[j][i]) $row.append(saveElems[j][i]); 
      } 
     } 
     computeTotals(); 
    }); 

    function computeTotals() { 
     var saveValues = [], 
      i = 0, j = 0, cellValue, colValue, rowTotals = [], colTotals = []; 

     $('#report tr').not(':first, :last').each(function() { 
      saveValues[i] = []; 
      j = 0; 
      $(this).children().not(':first, :last').each(function() { 
       saveValues[i][j] = this.innerHTML; 
       j++ 
      }); 
      i++; 
     }); 

     for (var k = 0, kl = saveValues.length; k < kl; k++) { 
      rowTotals[k] = 0; 
      for (var l = 0, ll = saveValues[k].length; l < ll; l++) { 
       cellValue = parseFloat(saveValues[k][l]); 
       colTotals[l] = cellValue + ((colValue = colTotals[l]) ? colValue : 0); 
       rowTotals[k] = cellValue + rowTotals[k]; 
      } 
     } 

     i = 0; 
     $('#report tr:not(:first, :last)').each(function() { 
      $(this).children(':last').html(rowTotals[i]); 
      i++; 
     }); 

     i = 0; 
     $('#report tr:last').children().not(':first, :last').each(function() { 
      console.log(colTotals[i]); 
      this.innerHTML = colTotals[i]; 
      i++; 
     }); 
    } 

    computeTotals();