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

Question

尝试制作财务报告。 模板引擎（Jinja2）动态创建HTML表。该表有几行，每行都有一个类，它告诉我该行属于哪个级别；一个id告诉我该帐户代码是什么；以及一个data-parent属性，告诉我哪个帐户代码是父帐户-确定亲子关系。

我正在尝试对总数求和：父级等于其所有子级的值。但是，我陷入了Java语言中，在阅读了大量问题，教程等之后，似乎无法弄清楚这一点。

到目前为止我想到的是： 遍历表中的每个代码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>