iterate column in row in table by JQuery

Question

I have a trouble with each() in JQuery. I have a table contain information about student include: name, math score, physical score, chemistry score and last column is average score has default value is "?".

I want when I click to button account average, column average score will display average = (math + physical + chemistry)/3. Currently, I leave the class of the 3 score columns as score and iterate like this:

   $("#btn-average").click(function() {
    var sum = 0;
    $(".score").each(function(value) {
      value = parseFloat($(this).text());
      sum += value;
    });
    var average = sum / 3;
    $(".average-score").text(average.toFixed(1));
  });

However, if when I add a new student to the table, all the points will be added when the average is calculated, I don't know what to do. Please, help me, thank you so much. This is my table


      
        
        name
        math score
        physical score
        chemistry score
        average score
      
      
        1
        Peter
        9
        8.5
        7.5
        ?

Christian · Accepted Answer

The Problem is that you itterate over all ".score" fields in one go, you need to break that up into induvidual chunks.

The most common way would be to itterate the rows, and inside that itterate the ".score" fields.

Here is an example:

$("#btn-average").click(function() {
  $(".student-info").each(function() {
    let sum = 0;
    let count = 0;
    $(this).find(".score").each(function() {
      value = parseFloat($(this).text());
      sum += value;
      count++;
    });
    const average = sum / count;
    $(this).find(".average-score").text(average.toFixed(1));
  });
});



  
    
    name
    math score
    physical score
    chemistry score
    average score
  
  
    1
    Peter
    9
    8.5
    7.5
    ?
  
  
    2
    Max
    3
    5.5
    9.5
    ?

iterate column in row in table by JQuery

Answers (2)

Related Questions