CODEWITHSUNDEEP
javascripthtml
James Gahan
James Gahan

Reputation: 13

calculating average? on dynamic html table

I've created a dynamic html table, but I need to take the values from within the tables and calculate the averages of each row? I'm using javascript but would prefer not to use jquery. This is what I have so far.

https://jsfiddle.net/JamesGahan1/xwz62b1r/

calcAverage = function() {
var tbl = document.getElementById('myTable');
for(var i= 0; i<tbl.rows.length; i++){


}
}


//  var tableRow = document.getElementById();
  //var tableCells = tableRow.getElementsByTagName("td");
//  var assignmentOne = tableCells[2].innerText;
 // var averageGrade = tableCells[2].innerText;



  //tableCells[3].innerHTML = averageGrade;
  //if (averageGrade < 40) {
  //  tableCells[3].style.backgroundColor = "red";
   // tableCells[3].style.color = "white";
  //}
//}//

AddRow = function() {
 
  
  var tbl = document.getElementById('myTable'); // table reference
        row = tbl.insertRow(tbl.rows.length);      // append table row
       var i;
    // insert table cells to the new row
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
       var createCell =row.insertCell(i).contentEditable = true;
    }
}
  
  
  
 



AddColumn = function() {

 
// var q = document.getElementById('myTable').rows.length;
 //for(i=0; i<q; i++)
 
 // var row = document.getElementById('myTable').rows[i +1];
   // var x = row.insertCell(3).contentEditable = true;
 //}
 
  var tbl = document.getElementById('myTable'); // table reference
      
    // open loop for each row and append cell
    for (var i = 0; i < tbl.rows.length; i++) {
        var createCell =tbl.rows[i].insertCell(tbl.rows.length).contentEditable = true ;
    }
}
table,
th,
td {
  table-layout: fixed;
  border-style: groove;
  border-width: 3px;
  height:90px;
  width:90x;
  col-width:90px
}

th {
  
  text-align: center;
  height:90px;
  width:90px;
}
tr{
  width:90px;
  height:90px;
}
<body>
  <div>


    <table id='myTable'>
      <tr>
        <th align="center" background="yellow">Student Name</th>
        <th align="center">Student ID</th>
        <th align="center">Assignment 1</th>
        <th align="center">Final Grade</th>
      </tr>

      <tr id= "1">
        <td align="left" contentEditable="true"></td>
        <td align="left" contentEditable="true"></td>
        <td align="right" contentEditable="true"></td>
        <td align="right" contentEditable="true"></td>
      </tr>
    </table>
    </div>
    <button type='btn' onclick="AddRow()">
      Add Row

    </button>
    <button type='btn' onclick="AddColumn()">
      Add Column

    </button>
    <button type='btn' onclick="LoadData()">
      Load data

    </button>
    <button type='btn' onclick="SaveData()">
      Save data

    </button>
  
  <button type='btn' onclick="calcAverage()">
    Calculate Average
  </button>
</body>

Upvotes: 1

Views: 1414

Answers (1)

A. L
A. L

Reputation: 12669

Basically you just need to get the 4th column of each row (excluding the first) and then just getting their values, adding them together and then dividing them and putting them SOMEWHERE.

I don't do any checking here, but you probably should (if you need to).

Javascript:

calcAverage = function() {
    var tbl = document.getElementById('myTable');
  var count = 0;
  var total = 0;
    for(var i= 1; i<tbl.rows.length; i++){
        var num = Number(tbl.rows[i].cells[3].innerHTML);
        total += num;
    count++;
    }
  console.log(total/count);
  document.getElementById("average").innerHTML = total/count;
}

updated fiddle: https://jsfiddle.net/xwz62b1r/1/

Upvotes: 1

Related Questions