Расчет динамической таблицы DOM

Question

У меня есть таблица, которая динамически рассчитывается при вводе значений в ячейки.Вторая и третья ячейки каждого столбца в таблице добавляются, чтобы получить значения в 4-й ячейке, и все значения по вертикали должны складываться, чтобы получить итоговые значения в последних нижних ячейках.Есть одна ячейка, которая вычисляет неправильно, и я не могу понять, почему даже после отладки.Последняя ячейка в последнем ряду и столбце вычисляется поздно и неверно.Любая помощь будет высоко ценится.

<table border="1" id="regionLead">
       <tr>
         <th colspan="4">Region Lead</th>       
       </tr>
       <tr>
         <td>Region</td>
         <td>Deployed</td>
         <td>Vacant</td>
         <td>Total</td>
       </tr>
       <tr>
         <td>Eastern</td>
         <td><input type="text" value="0" class="column1" id="easternDeployed" onchange="test.calculate()" style="background-color:#eee;width:55px"/></td>
         <td><input type="text" value="0" class="column2" id="easternVacant" onchange="test.calculate()" style="background-color:#eee;width:55px"/></td>
         <td><div class="column3" id="easternTotal">0</div></td>       
       </tr>
       <tr>
         <td>Southern</td>
         <td><input type="text" value="0" class="column1" id="southernDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><input type="text" value="0" class="column2" id="southernVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><div class="column3" id="southernTotal">0</div></td>       
       </tr>
       <tr>
         <td>Central</td>
         <td><input type="text" value="0" class="column1" id="centralDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><input type="text" value="0" class="column2" id="centralVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><div class="column3" id="centralTotal">0</div></td>       
       </tr>
       <tr>
         <td>Western</td>
         <td><input type="text" value="0" class="column1" id="westernDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><input type="text" value="0" class="column2" id="westernVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><div class="column3" id="westernTotal">0</div></td>       
       </tr>
       <tr>
         <td>Europe</td>
         <td><input type="text" value="0" class="column1" id="europeDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><input type="text" value="0" class="column2" id="europeVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><div class="column3" id="europeTotal">0</div></td>       
       </tr>
       <tr>
         <td>Asia</td>
         <td><input type="text" value="0" class="column1" id="asiaDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><input type="text" value="0" class="column2" id="asiaVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
         <td><div class="column3" id="asiatotalTotal">0</div></td>       
       </tr>
       <tr>
         <td>Total</td>
         <td><div id="deployed"></div></td>
         <td><div id="vacant"></div></td>
         <td style="background-color:yellow"><div id="total"></div></td>      
       </tr>
    </table>


var allBoxes = 
document.querySelector("#regionLead");
calculate(allBoxes);

function calculate(tbl){
tbl.addEventListener("change", function(e){    
if (e.target.tagName === "INPUT"){
var rowNode = e.target.parentNode.parentNode;
  //console.log(rowNode);

  var rowInputs = 
 rowNode.getElementsByTagName('input');
  var tableNode = e.target.parentNode.parentNode.parentNode;      
 // console.log(tableNode);
  /*get Deployed column of the table to add up*/
  var columnInputs = tableNode.getElementsByClassName('column1');

  /*get Vacant column of the table to add up*/      
  var columnInputs2 = tableNode.getElementsByClassName('column2');

  /*get Vacant column of the table to add up*/      
  var columnInputs3= tableNode.getElementsByClassName('column3');
  //alert(columnInputs3.length)
  var colSum = 0
  for(var i=0; i<columnInputs.length; i++){
    colSum += parseInt(columnInputs[i].value);
  }

  var colSum2 = 0
  for(var i=0; i<columnInputs2.length; i++){
    colSum2 += parseInt(columnInputs2[i].value);
  }      

  var colSum3 = 0
  for(var i=0; i<columnInputs3.length; i++){
    console.log(parseInt(columnInputs3[i].innerText));
    colSum3 += parseInt(columnInputs3[i].innerHTML);
  }  

  //Last cell in the deployed column
  tableNode.rows[8].cells[1].innerHTML = colSum;

  //Last cell in the vacan column
  tableNode.rows[8].cells[2].innerHTML = colSum2;     

  tableNode.rows[8].cells[3].innerHTML = colSum3;




  var rowDiv = rowNode.getElementsByTagName('div');
  var before = rowInputs[0].value || 0;
  var after = rowInputs[1].value || 0;
  if(before && after){      
      var total = parseInt(before)+parseInt(after);
      rowDiv[0].innerHTML = total; 
  }
}
 })
 }

https://codepen.io/isogunro/pen/ebmrxv?editors=1011

Answer 1

Попробуйте:

В строке 44 кода Javascript на Codepen замените colSum3 на colSum + colSum2.

Так строка 44 выглядит следующим образом:

tableNode.rows[8].cells[3].innerHTML = colSum + colSum2;

Таким образом, colSum и colSum2 добавляются динамически, а желтая ячейка сетки обновляется вместе с другими.

(Я до сих пор не выяснил, почему colSum3 не обновляетсяс colSum и colSum2.)