JSFiddle - React, Tailwind, and code Playground
HTML
<table id="Table" style="width:100%" contenteditable >
<tr>
<th id="Name" bgcolor= #00FFCC >Name</th>
<th id="ID" bgcolor= #00FFCC>ID</th>
<th bgcolor= #00FFCC >Assignment 1</th>
<th contenteditable = false bgcolor= #00FFCC >Final</th>
</tr>
<tbody>
<tr id="Row">
<td contenteditable='true'>Scott Richardson </td>
<td contenteditable='true'>123456</td>
<td contenteditable='true' id= "Right" onblur= "Function()">-</td>
<td id="Final" contenteditable='false'></td>
</tr>
</tbody>
</table>
<button id="average" id="button" class="button1" onclick="average()">Calculate grade</button>
<button onclick= "Function()" id="button" class="button1">Add row</button>
<button type="button" class="button1"onclick="AddColumn()">Add Column</button>
<button type = "button" class="button1">
Save Cookie</button>
<button type = "button" class="button1">Load Cookie
</button>
CSS
table,
th,
td
{
border: 1px solid black;
font-family: sans-serif;
}
JavaScript
var assignment =1;
average = function()
{
var table = document.getElementById("Table");
var rows = table.rows;
var nsub=0;
var int = 0;
for (var i = 1; i < rows.length; i++)
{
var cells = rows[i].cells;
var sum = 0;
var num = 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++;
}
else
{
nsub ++;
}
}
}
var avg = sum / num;
rows[i].cells[cells.length -1].innerHTML = "<td>" + Math.round(average) + "%" + "</td>";
if(avg < 40)
{
rows[i].cells[cells.length -1].style.backgroundColor= "red";
}
else
{
rows[i].cells[3].style.backgroundColor= "white";
rows[i].cells[3].style.color="black";
}
}