<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 getColumnSum(tbl) {
  var colSum = 0;
  tbl.rows.forEach(function(row) {
    colSum = colSum + row.cells[1].children[0].value;
  });
  return colSum;
}

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

function createInput(value, { size, className, readonly = false }) {
  var attrs = [];
  attrs.push("value='" + value + "'");
  if (size) {
    attrs.push("size='" + size + "'");
  }
  if (className) {
    attrs.push("class='" + className + "'");
  }
  if (readonly) {
    attrs.push("readonly");
  }
  return "<input " + attrs.join(" ") + "'>";
}

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

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

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

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

function getColSum(cInputs) {
  var colSum = 0;
  Array.from(cInputs).forEach(function(input) {
    colSum += parseInt(input.value);
  });
  return colSum;
}

function calculate(tableNode) {
  var inputs = [
    tableNode.querySelectorAll("tr:not(:last-child) td:nth-child(2) input"),
    tableNode.querySelectorAll("tr:not(:last-child) td:nth-child(3) input"),
    tableNode.querySelectorAll("tr:not(:last-child) td:nth-child(4) input")
  ];
  inputs.forEach(function(input, index) {
    var colSum = getColSum(input);
    var totalRow = tableNode.querySelector("tr:last-child");
    totalRow.cells[index + 1].innerHTML = colSum;
  });
}

function tableChangeHandler(e) {
  calculate(
    $(e.target)
      .closest("table")
      .get(0)
  );
}

getData("Advisor Staffing");

$(function() {
  $("#AdvStaffing").on("change", tableChangeHandler);
});
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