javascript - 分层数据上基于TR id的TD条件求和

Question

试图做一份财务报告。 模板引擎 (Jinja2) 动态创建一个 HTML 表格。该表有几行，每一行都有一个类，告诉我该行属于哪个级别，一个 id 告诉我什么是帐户代码，还有一个数据父属性告诉我哪个帐户代码是父级 - 确定亲子关系。

我正在尝试求和:父项等于其所有子项的值。但是，我被困在 Javascript 中，在阅读了大量问题、教程等之后，似乎无法弄清楚这一点。

到目前为止我想到了什么: 遍历表中的每个代码 ID(我可以从服务器的数组中获取此数据)。对于每个代码，遍历每一行。对于每一行，检查代码是否有子代。如果代码有子项，则将其所有子项的内容相加。如果没有，则跳过它。

逻辑似乎有道理，但我仍然得到零，并且在一堆 for 循环和 if 语句的中间，我不知道如何调试它。

感谢任何帮助。 干杯

var table = document.getElementById("incomestatement");
var ids = [3000000, 3010000, 3010100, 3010101, 3010102, 3010103]
// Array of all data-code used in the table
var length = ids.length
for (var k = 0; k < length; k++) { // For each code...

  for (var i = 0, row; row = table.rows[i], i < row; i++) { // for each row

    var account = document.getElementById('a' & ids[k]); // finds the TR element
    var data_code = account.dataset.code; // get's the code

    var next_account = document.getElementById('a' & ids[k]).nextSibling; // find's the sibling's code
    var next_code = next_account.dataset.parent; // finds the sibling's parent code

    if (data_code == next_code) { // if the original element is the parent of the sibbling

      for (var j = 2, col; col = rows.cells[i], j < col; j++) { // for each TD

        var total = 0;
        var values = innerHTML;
        newValue = total + values;

      }
    }
  }
}

.code {
  text-align: left;
  text-indent: 0px;
}

.account {
    white-space: nowrap;
 }

.a1 {
  background-color: #1111;
}

.a2 {
  text-indent: 10px;
}

.a3 {
  text-indent: 20px;
}

.a4 {
  text-indent: 30px;
}

.values {
  text-align: right;
}

<div id="container">
  <table id="incomestatement">

    <tbody>
      <tr>
        <td>Code</td>
        <td>Account</td>

      </tr>
      <tr class="a1" ,="" id="a3000000" data-code="a3000000" data-parent="a0">
        <td class="code" data-level="a1"> 3000000 </td>
        <td class="account"> Total Revenues </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
      </tr>

      <tr class="a2" ,="" id="a3010000" data-code="a3010000" data-parent="a3000000">
        <td class="code" data-level="a2"> 3010000 </td>
        <td class="account"> First Total Revenue </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
      </tr>

      <tr class="a3" ,="" id="a3010100" data-code="a3010100" data-parent="a3010000">
        <td class="code" data-level="a3"> 3010100 </td>
        <td class="account"> Second Total Revenue </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
      </tr>

      <tr class="a4" ,="" id="a3010101" data-code="a3010101" data-parent="a3010100">
        <td class="code" data-level="a4"> 3010101 </td>
        <td class="account"> Revenue 1 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
      </tr>

      <tr class="a4" ,="" id="a3010102" data-code="a3010102" data-parent="a3010100">
        <td class="code" data-level="a4"> 3010102 </td>
        <td class="account"> Revenue 2 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
      </tr>

      <tr class="a4" ,="" id="a3010103" data-code="a3010103" data-parent="a3010100">
        <td class="code" data-level="a4"> 3010103 </td>
        <td class="account"> Revenue 3 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
      </tr>

    </tbody>
  </table>
</div>

Answer 1

您可以使用递归函数计算每个级别值的总和，如下所示:

function makeSumForRow(row) {
    var valueCells = row.getElementsByClassName('values');
    // fill the array of data cell values with the current values
    var values = Array(valueCells.length);
    for (var j=0; j<values.length; j++) {
       values[j] = parseFloat(valueCells[j].innerText.replace(/\s/g,''));
    }
    var childRows = row.parentNode.querySelectorAll('[data-parent="'+row.id+'"]');
    if (childRows.length > 0) {
        for (var i=0; i<childRows.length; i++) {
            // recursively calculate the sum of child row values
            var nextRowValues = makeSumForRow(childRows[i]);
            for (var j=0; j<values.length; j++) {
                values[j] += nextRowValues[j];
            }
        }
        // fill the cells with the calculated sums
        for (var j=0; j<values.length; j++) {
            valueCells[j].innerHTML = values[j].toFixed(1);
        }
    }
    // return array of the current row values for the previous level of nesting
    return values;
}

// find the "main" row (with no parent row) and call the recursion for it
var mainRow= document.querySelector('tr[data-parent="a0"]');
makeSumForRow(mainRow);

.code {
  text-align: left;
  text-indent: 0px;
}

.account {
    white-space: nowrap;
 }

.a1 {
  background-color: #1111;
}

.a2 {
  text-indent: 10px;
}

.a3 {
  text-indent: 20px;
}

.a4 {
  text-indent: 30px;
}

.values {
  text-align: right;
}

<div id="container">
  <table id="incomestatement">

    <tbody>
      <tr>
        <td>Code</td>
        <td>Account</td>

      </tr>
      <tr class="a1" ,="" id="a3000000" data-code="a3000000" data-parent="a0">
        <td class="code" data-level="a1"> 3000000 </td>
        <td class="account"> Total Revenues </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
      </tr>

      <tr class="a2" ,="" id="a3010000" data-code="a3010000" data-parent="a3000000">
        <td class="code" data-level="a2"> 3010000 </td>
        <td class="account"> First Total Revenue </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
      </tr>

      <tr class="a3" ,="" id="a3010100" data-code="a3010100" data-parent="a3010000">
        <td class="code" data-level="a3"> 3010100 </td>
        <td class="account"> Second Total Revenue </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
        <td class="values"> 0.0 </td>
      </tr>

      <tr class="a4" ,="" id="a3010101" data-code="a3010101" data-parent="a3010100">
        <td class="code" data-level="a4"> 3010101 </td>
        <td class="account"> Revenue 1 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
        <td class="values"> 5000.0 </td>
      </tr>

      <tr class="a4" ,="" id="a3010102" data-code="a3010102" data-parent="a3010100">
        <td class="code" data-level="a4"> 3010102 </td>
        <td class="account"> Revenue 2 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
        <td class="values"> 900.0 </td>
      </tr>

      <tr class="a4" ,="" id="a3010103" data-code="a3010103" data-parent="a3010100">
        <td class="code" data-level="a4"> 3010103 </td>
        <td class="account"> Revenue 3 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
        <td class="values"> 100.0 </td>
      </tr>

    </tbody>
  </table>
</div>