How To Get HTML Table Column Max, Min, Sum, Avg Value In Javascript
In This Javascript Tutorial we will See How To Find The Maximum, Minimum Value And Calculate The Sum And Average Value Of An HTML Table Column using JS And Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript HTML Table - Min Max Sum Avg</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Value</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>43</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>28</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>15</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>50</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>31</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>85</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>18</td>
</tr>
</table>
<span id="minV"></span><br>
<span id="maxV"></span><br>
<span id="sumV"></span><br>
<span id="avgV"></span>
<script>
var table = document.getElementById("table"), sumVal = 0;
getMin();
getMax();
getSum();
getAvg();
// get min value
function getMin()
{
var minVal, minIndex;
for(var i = 1; i < table.rows.length; i++){
if(i === 1){
minVal = table.rows[i].cells[2].innerHTML;
minIndex = table.rows[i].rowIndex;
}else if(minVal > table.rows[i].cells[2].innerHTML){
minVal = table.rows[i].cells[2].innerHTML;
minIndex = table.rows[i].rowIndex;
}
}
table.rows[minIndex].cells[2].style.background = "red";
table.rows[minIndex].cells[2].style.color = "white";
document.getElementById("minV").innerHTML = "Minimum Value = "+minVal;
document.getElementById("minV").style.color = "red";
console.log("Min => "+minVal);
}
// get max value
function getMax()
{
var maxVal, maxIndex;
for(var i = 1; i < table.rows.length; i++){
if(i === 1){
maxVal = table.rows[i].cells[2].innerHTML;
maxIndex = table.rows[i].rowIndex;
}else if(maxVal < table.rows[i].cells[2].innerHTML){
maxVal = table.rows[i].cells[2].innerHTML;
maxIndex = table.rows[i].rowIndex;
}
}
table.rows[maxIndex].cells[2].style.background = "green";
table.rows[maxIndex].cells[2].style.color = "white";
document.getElementById("maxV").innerHTML = "Maximum Value = "+maxVal;
document.getElementById("maxV").style.color = "green";
console.log("Max => "+maxVal);
}
// caculate total/sum value
function getSum()
{
for(var i = 1; i < table.rows.length; i++){
sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);
}
document.getElementById("sumV").innerHTML = "Sum Value = "+sumVal;
console.log("Sum => "+sumVal);
}
// caculate avg value
function getAvg()
{
var avg = sumVal / (table.rows.length - 1);// minus the header
document.getElementById("avgV").innerHTML = "Average Value = "+parseInt(avg);
console.log("Avg => "+parseInt(avg));
}
</script>
</body>
</html>
OUTPUT:
