JSFiddle - React, Tailwind, and code Playground

by Cathal Doherty

HTML

<table id="Table" style="width:100%">
<tr>

    <th id="Name" bgcolor= #00FFCC >Name</th>
    <th id="ID" bgcolor= #00FFCC>ID</th>
    <th id="A" bgcolor= #00FFCC>Assignment 1</th>
    <th id="F" bgcolor = #00FFCC>Final</th>

  </tr>
  <tr>
    <td>Scott	Richardson </td>
    <td>123456</td>
    <td contenteditable ></td>
    <td></td>
  
 
    
  </tr>
  <tr>
    <td>Joseph	Peterson </td>
    <td>112345</td>
    <td contenteditable ></td>
    <td></td>
    
    

    
  </tr>
  <tr>
    <td>Ruth Rogers </td>
    <td>17264</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Arthur Perez </td>
    <td>19726</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Angela	Collins </td>
    <td>846522</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Shawn	Lee </td>
    <td>986553</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Jonathan	Campbell </td>
    <td>8653452</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Kathryn	Howard </td>
    <td>963432</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Janice	Bennett </td>
    <td>18746</td>
    <td contenteditable ></td>
    <td></td>
    
    
  </tr>
  <tr>
    <td>Stephanie	Stewart </td>
    <td>186453</td>
    <td contenteditable ></td>
    <td></td>
</table>

<button id="click" class="button1">Final grade</button>

CSS

table,
th,
td 
{
  border: 1px solid black;
  font-family: sans-serif;
}



.button1 
{
  background-color:#00FFCC;
    width:100px; 
   margin-left:600px;
}

JavaScript

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

       }
     
   }
 }

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