How to create rows cell loop in js

Question

I am trying to sum a table column total.

Here is an example of only two column for test purposes. I want to calculate table column's item total using a javascript loop.

How to create the loop if we don't know how many rows and columns are inside in table? I hope you understand what I mean and also hope for your kindly suggestion.

<p><b>Student at Stanford University 2013-2014</b></p>
<table><tr><th>Faculty (Subject)</th><th>Student 2013</th><th>Student 2014</th></tr></table>
<table id="sdtable">
    <tr><th>Business</th><td>12922</td><td>11420</td></tr>
    <tr><th>Earth Sciences</th><td>4320</td><td>4611</td></tr>
    <tr><th>Education</th><td>14560</td><td>13490</td></tr>
    <tr><th>Engineering</th><td>8750</td><td>9863</td></tr>
    <tr><th>Humanities & Sciences</th><td>7819</td><td>7219</td></tr>
    <tr><th>Medicine</th><td>5219</td><td>4200</td></tr>
</table>

<button onclick="Calculate()">Calculate</button>
<div id="Studentf" class="Studentf"></div>
<div id="Students" class="Students"></div>
<div id="Studentt" class="Studentt"></div>

and

var ftable = document.getElementById("sdtable");
var i= 0;
var sumFirst=0;
var sumSecond=0;
var sumTotal=0;

function Calculate(){

    for (i=0;i<ftable.rows.length; i++){
        sumFirst=sumFirst+parseInt(ftable.rows[i].cells[1].innerHTML);
        sumSecond=sumSecond+parseInt(ftable.rows[i].cells[2].innerHTML);
    } 
    sumTotal=sumFirst+sumSecond;

    document.getElementById("Studentf").innerHTML +="<b>Student in 2013 = </b>" +sumFirst;
    document.getElementById("Students").innerHTML +="<b>Student in 2014 = </b>" +sumSecond;
    document.getElementById("Studentt").innerHTML +="<b>Total Student = </b>" +sumTotal;

}

Answer 1

The key here is that you need to use cells collection to get number of columns that can change when you add new years to the table. You will also have to dynamically create elements for summary information per year.

Here is an example:

var ftable = document.getElementById("sdtable");
var i = 0;
var sumFirst = 0;
var sumSecond = 0;
var sumTotal = 0;

function Calculate() {

    var rows = ftable.tBodies[0].rows,
        header = ftable.tHead.rows[0],
        cells = ftable.tBodies[0].rows[0].cells,
        years = [];

    for (var i = 0; i < rows.length; i++) {
        for (var j = 1; j < cells.length; j++) {
            if (!years[j]) years[j] = 0;
            years[j] += parseInt(rows[i].cells[j].innerHTML);
        }
    }

    sumTotal = years.reduce(function(prev, curr) {
        return prev + curr;
    }, 0);

    var sum = document.getElementById("sum");
    sum.innerHTML = '';
    for (var j = 1; j < cells.length; j++) {
        console.log(header.cells[j])
        sum.insertAdjacentHTML('afterbegin', '<p><b>' + header.cells[j].innerHTML + '</b> = ' + years[j] + '</p>');
    }
    sum.insertAdjacentHTML('beforeend', "<b>Total Student = </b>" + sumTotal);
}

Demo: http://jsfiddle.net/x2sscpxL/1/