Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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;
- }
- }
- })
- }
Add Comment
Please, Sign In to add comment