<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="/loadjquery.js"></script>
<script>
    console.log("HELLO");
    //Get DATA for the appropriate table
</script>
<script type="text/javascript" src="/calcTableSum.js"></script>
<script src="/dashboard.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

</head>

<body>
    <div class="col-md-3 dashboard">You can change the numbers in grey</div>
        <div>
        <table id="AdvStaffing" border="1" width="100%" height="300px">
            <tr class="tblHeader">
                <td colspan="5">Advisor Staffing</td>
            </tr>
            <tr class="subHeader">
                <td>Region</td>
                <td>Pilot</td>
                <td>Name</td>
                <td>Trainer</td>
            </tr>
        </table>
    </div>
		  .tblHeader{
		     color:#fff;
 		     background-color:#000066;
		     font-weight:bold;
		  }
		  .subHeader{
 		     background-color:#CFECEC;
		     font-weight:bold;
		  }
		  .eastern{
		    color:#4B0082 !important;
		    font-size: 12px !important;
		    font-weight:bold !important;
			
		  }
		  .regionCell{
		    font-size: 12px !important;
		    font-weight:bold !important;
		  }

		  .southern{
		    color:#3cb371 !important;
		    font-size: 12px !important;
		    font-weight:bold !important;
		  }
		  .central{
		    color:#FFA500 !important;
		    font-size: 12px !important;
		    font-weight:bold !important;
		  }
		  .western{
		    color:#1E90FF !important;
		    font-size: 12px !important;
		    font-weight:bold !important;
		  }
		  .europe{
		    color:#800000 !important;
		    font-size: 12px !important;
		    font-weight:bold !important;
		  }
		  .asia{
		    color:#FF0000 !important;
		    font-size: 12px !important;
		    font-weight:bold !important;
		  }
		.app{
		  /*display:flex;
		  flex-wrap: wrap;
		  justify-content:space-evenly;
		  margin: auto;*/
		  padding: 10px;
		  text-align: center;
		}
		div.dashboard{
		  margin:5px;
		  display:inline-block;
		/*background-color:#eee;*/
		}
		
		a.dashLink{
		  color:#ffff00;
		}

		input{
		 border: 0px solid #fff !important;
		 width: 80px !important;
		 text-align:center !important;
     background-color: #eee !important;
		}


		#workForceUtiliazation input{
		    width: 95px !important;
		}

		input[class$="column0"]{
  		   width:63px !important;
         background-color: #fff !important;
		}

		.dashboard table {
		   height: 290px;
		   width: 300px;
		}

		#h4title{
		  color:red;
		  margin-left:15px;
		}
		/*.row {
		  width: 850px;
		}*/

		#dashSupportDocument{
		  font-size:14px;
		  font-weight:bold;
		}
$(function() {
    var AdvStaffing = document.querySelector("#AdvStaffing");
    calculate(AdvStaffing, "AdvStaffing");
});

getData("Advisor Staffing");

function getColumnSum(tbl) {
    var colSum = 0;
    for (var i = 0; i < tbl.rows.length; i++) {
        colSum = colSum + tbl.rows[i].cells[1].children[0].value;
    }
    return colSum;
}


function getData(listName) {
    var root = 'https://my-json-server.typicode.com/isogunro/dashboard/posts';
    $.ajax({
        url: root,
        method: 'GET'
    }).then(function(data) {
        if (listName == 'Advisor Staffing') {
            buildTable(data, "#AdvStaffing", listName);
         /* $('#AdvStaffing').change(function(){
            alert("hello");
             $('#AdvStaffing').trigger('change');
          });  */          
        }     
    });
}

function buildTable(data, tblIDName, lstName) {
    var tblRef = document.querySelector(tblIDName);
    var tblRow = data.length;
    for (var x = 0; x < data.length; x++) {
        var newRow = tblRef.insertRow(-1);
        if (tblIDName == "#AdvStaffing") {
            //console.log(tblIDName);
            var cell = newRow.insertCell(0);
            cell.innerHTML = "<input type='text' size='7' class='" + getClass(data[x].Region) + " column0' readonly value='" + data[x].Region + "'>";
            var cell2 = newRow.insertCell(1);
            cell2.innerHTML = "<input type='text' size='5'  style='text-align:center' class='" + getClass(data[x].Region) + " column1' data-id='" + data[x].ID + "' data-columnName='Current' style='width:65px' value='" + data[x].Pilot + "'>";
            var cell3 = newRow.insertCell(2);
            cell3.innerHTML = "<input type='text' column2'  size='5' style='text-align:center' class='" + getClass(data[x].Region) + " column2' data-id='" + data[x].ID + "' data-columnName='Deployed' style='width:55px' value='" + data[x].Name + "'>";

            var cell4 = newRow.insertCell(3);
            cell4.innerHTML = "<input type='text' size='5'  style='text-align:center' class='" + getClass(data[x].Region) + " column3' data-id='" + data[x].ID + "' data-columnName='Vacant' style='width:55px' value='" + data[x].Trainer + "'>";
        }

    }
}

function sum(deployed, vacant) {
    var total = parseInt(deployed) + parseInt(vacant);
    return total;
}

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

            var colID = e.target.getAttribute('data-id');
            var colName = e.target.getAttribute('data-columnName');

            var newColValue = e.target.value;

            var rowInputs = rowNode.getElementsByTagName('input');

            if (tblID == "AdvStaffing") {
                var tableNode = e.target.parentNode.parentNode.parentNode;
                var columnInputs = tableNode.getElementsByClassName('column1');

                var columnInputs2 = tableNode.getElementsByClassName('column2');

                var columnInputs3 = tableNode.getElementsByClassName('column3');

                var colSum = getColSum(columnInputs);
                var colSum2 = getColSum(columnInputs2);
                var colSum3 = getColSum(columnInputs3);

                tableNode.rows[8].cells[1].innerHTML = colSum;

                tableNode.rows[8].cells[2].innerHTML = colSum2;

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

function getColSum(cInputs) {
    var colSum = 0
    for (var i = 0; i < cInputs.length; i++) {
        colSum += parseInt(cInputs[i].value);
    }

    return colSum;
}

function getClass(region) {
    if (region == 'Eastern') {
        return 'eastern';
    } else if (region == 'Southern') {
        return 'southern';
    } else if (region == 'Central') {
        return 'central';
    } else if (region == 'Western') {
        return 'western';
    } else if (region == 'Europe') {
        return 'europe';
    } else if (region == 'Asia') {
        return 'asia';
    }
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons
  2. https://unpkg.com/vuetify@1.0.4/dist/vuetify.min.css
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js