数据透视表并分配单元格值

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

然后当我再次追加时，它应该更像：

                     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();