How to count class change within rows in html tables

Question

I would like to count class changed cells in each rows.

My desired result is like below.

are there any way to count?

Thanks

 var $ = jQuery;
 $('.click').on('click', function(e) {
      e.preventDefault();
     $(this).toggleClass('aqua')
    })

td {
  border: solid 1px black;
  padding:5px;
}
table {
  border-collapse: collapse;
}

.noborder {
  border: none;
  padding: 5px 8px;
}

.aqua {
background-color:aqua;}

user_1540854 · Answer

You could do a foreach in each tr and calculate the tds inside it that have the 'aqua' code:

var $ = jQuery;
 $('.click').on('click', function(e) {
      e.preventDefault();
      $(this).toggleClass('aqua');
      recalculate();
    })
    
function recalculate() {
    $('tr').each(function(index, tr) {
       let result = $(tr).find('td.click.aqua').length;
       $(tr).find('.result').text(result);
    });
}

td {
  border: solid 1px black;
  padding:5px;
}
table {
  border-collapse: collapse;
}

.noborder {
  border: none;
  padding: 5px 8px;
}

.aqua {
background-color:aqua;}

user_3558931 · Answer

Are you just interested in counting the cells with class .aqua or the number of times a cell toggles?

//number of cells with `.aqua` class
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );

var $ = jQuery;
$('.click').on('click', function(e) {
      e.preventDefault();
     $(this).toggleClass('aqua');
     $(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
})

td {
  border: solid 1px black;
  padding:5px;
}
table {
  border-collapse: collapse;
}

.noborder {
  border: none;
  padding: 5px 8px;
}

.aqua {
background-color:aqua;}

To count the number of times the .aqua class toggles you would have to increment the previous value, zero if none.

//count the number of times `.aqua` toggles
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );

var $ = jQuery;
$('.click').on('click', function(e) {
      e.preventDefault();
     $(this).toggleClass('aqua');
     $(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
})

td {
  border: solid 1px black;
  padding:5px;
}
table {
  border-collapse: collapse;
}

.noborder {
  border: none;
  padding: 5px 8px;
}

.aqua {
background-color:aqua;}

How to count class change within rows in html tables

2 Answers