피벗 테이블 및 셀 값 할당

Question

자바 스크립트를 배우고 있으며 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="clearReport();">Clear</button> 

내가 뭘 걸려 라하는 것은 시간이 상단에 간다, 그래서 내 전체 테이블을 피벗입니다 :

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

은 그 때 나는 페이지를 취소 버튼이있다. 또한 - MySQL 출력과 함께 평균이 0 인 경우 데이터가없고 시간이 생략됩니다 (예 : 00:45에서 02:30). 그 0을 포함시켜야합니다. 또한 - 각 셀의 바닥과 측면에 총계가 필요합니다. 나는 많은 것을 요구하고 있다는 것을 압니다. 그러나 저는 이것에 대해 어떤 방향이 정말로 필요합니다.이 시점에서, 나는 그것에 대해 어떻게 해야할지 잘 모릅니다.

     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 

및 그런 다음 각 값을 시간에 의해 기본 키로 연결된 배열에 할당하십시오. 그러나 나는 그런 것을 보지 못한다. 필자는 자바 스크립트에서 객체가 느슨한 속성 및 값 모음 인 키 - 값 쌍을 읽음을 알았습니다. 그래서 생각지 못하는 것입니다. 잠시 동안 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();