JSFiddle - React, Tailwind, and code Playground

by amy_clarke5144

HTML

<table id="myTable" style="width:100%">


  <tr>
<!--sfaf-->
    <th id="StudentName" contenteditable='true' bgcolor="#00FFFF">Student Name</th>
    <th id="IDnumber" contenteditable='true' bgcolor="#00FFFF">Student ID</th>
    <th id="a1" bgcolor="#00FFFF">Assignment 1</th>
    <th id="a2" bgcolor="#00FFFF">Assignment 2</th>
    <th id="fg" bgcolor="#00FFFF">Final Grade</th>

  </tr>
  <tr>
    <td id="p1" align="left" contenteditable='true' bgcolor="#FFFFFF">-</td>
    <td contenteditable='true'>-</td>
     <td align ="right" contenteditable='true'>-</td>
     <td align ="right" contenteditable='true'>-</td>
     <td align ="right" /td>
    <td></td>
  </tr>


</table>

<button id="myFunction" class="mybutton">Calculate grade</button>

CSS

table,
th,
td {
  border: solid 1px #00FFFF ;
  font-family: normal 15px italic, sans-serif;
}

#StudentName {
  text-align: center;
}

#IDnumber {
  text-align: center;
}
#p1 {
  text-align: left;
}



.mybutton {
  background-color:  #CCB280;
  border: none;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

JavaScript

function myFunction() {
   var table = document.getElementById("myTable");
   var rows = table.rows;
   
   for (var i = 1; i < rows.length; i++) {
     var cells = rows[i].cells;
     var sum = 0;
		 var numbers = 0;
     for (var x = 2; x < (cells.length -1); x++) {
       var cell = cells[x];
       var addme = parseInt(cell.innerHTML);
       if(!isNaN(addme)) {       
          sum += addme;
          numbers++;
       }
     }
     var average = sum / numbers;
     rows[i].cells[7].innerHTML = "<td>" + Math.round(average) + "</td>";
   }
 }

document.getElementById('myFunction').onclick = myFunction;

function makeNewRow() {

}
function makeNewColumn() {

}
function