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 =＆gt;上测试此解决方案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();

透视表并指定单元格值

1 个答案: