Как подсчитать изменение класса в строках в таблицах html

Question

Я хотел бы посчитать ячейки, измененные классом, в каждой строке.

Мой желаемый результат, как показано ниже.

Есть ли способ подсчета?

Спасибо

 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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tr>
    <td class=click>1</td>
    <td class=click>2</td>
    <td class=click>3</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
  <tr>
    <td class=click>4</td>
    <td class=click>5</td>
    <td class=click>6</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
  <tr>
    <td class=click>7</td>
    <td class=click>8</td>
    <td class=click>9</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
</table>

Answer 1

Вы можете сделать foreach в каждом tr и вычислить в нем tds с кодом 'aqua':

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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tr>
    <td class=click>1</td>
    <td class=click>2</td>
    <td class=click>3</td>
    <td class="noborder"></td>
    <td class="result">0</td>
  </tr>
  <tr>
    <td class=click>4</td>
    <td class=click>5</td>
    <td class=click>6</td>
    <td class="noborder"></td>
    <td class="result">0</td>
  </tr>
  <tr>
    <td class=click>7</td>
    <td class=click>8</td>
    <td class=click>9</td>
    <td class="noborder"></td>
    <td class="result">0</td>
  </tr>
</table>

Answer 2

Вам просто интересно подсчитать ячейки с классом .aqua или количество переключений ячейки?

//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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tr>
    <td class=click>1</td>
    <td class=click>2</td>
    <td class=click>3</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
  <tr>
    <td class=click>4</td>
    <td class=click>5</td>
    <td class=click>6</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
  <tr>
    <td class=click>7</td>
    <td class=click>8</td>
    <td class=click>9</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
</table>

Чтобы подсчитать, сколько раз класс .aqua переключается, вам нужно увеличить предыдущее значение, ноль, если его нет.

//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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tr>
    <td class=click>1</td>
    <td class=click>2</td>
    <td class=click>3</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
  <tr>
    <td class=click>4</td>
    <td class=click>5</td>
    <td class=click>6</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
  <tr>
    <td class=click>7</td>
    <td class=click>8</td>
    <td class=click>9</td>
    <td class="noborder"></td>
    <td></td>
  </tr>
</table>