如何计算 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

您可以在每个 tr 中执行 foreach 并计算其中包含 'aqua' 代码的 tds：var $ = jQuery;&nbsp;$('.click').on('click', function(e) {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; $(this).toggleClass('aqua');&nbsp; &nbsp; &nbsp; recalculate();&nbsp; &nbsp; })&nbsp; &nbsp;&nbsp;function recalculate() {&nbsp; &nbsp; $('tr').each(function(index, tr) {&nbsp; &nbsp; &nbsp; &nbsp;let result = $(tr).find('td.click.aqua').length;&nbsp; &nbsp; &nbsp; &nbsp;$(tr).find('.result').text(result);&nbsp; &nbsp; });}td {&nbsp; border: solid 1px black;&nbsp; padding:5px;}table {&nbsp; border-collapse: collapse;}.noborder {&nbsp; border: none;&nbsp; padding: 5px 8px;}.aqua {background-color:aqua;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <td class=click>1</td>&nbsp; &nbsp; <td class=click>2</td>&nbsp; &nbsp; <td class=click>3</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td class="result">0</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class=click>4</td>&nbsp; &nbsp; <td class=click>5</td>&nbsp; &nbsp; <td class=click>6</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td class="result">0</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class=click>7</td>&nbsp; &nbsp; <td class=click>8</td>&nbsp; &nbsp; <td class=click>9</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td class="result">0</td>&nbsp; </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) {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp;$(this).toggleClass('aqua');&nbsp; &nbsp; &nbsp;$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );})td {&nbsp; border: solid 1px black;&nbsp; padding:5px;}table {&nbsp; border-collapse: collapse;}.noborder {&nbsp; border: none;&nbsp; padding: 5px 8px;}.aqua {background-color:aqua;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <td class=click>1</td>&nbsp; &nbsp; <td class=click>2</td>&nbsp; &nbsp; <td class=click>3</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class=click>4</td>&nbsp; &nbsp; <td class=click>5</td>&nbsp; &nbsp; <td class=click>6</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class=click>7</td>&nbsp; &nbsp; <td class=click>8</td>&nbsp; &nbsp; <td class=click>9</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td></td>&nbsp; </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) {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp;$(this).toggleClass('aqua');&nbsp; &nbsp; &nbsp;$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );})td {&nbsp; border: solid 1px black;&nbsp; padding:5px;}table {&nbsp; border-collapse: collapse;}.noborder {&nbsp; border: none;&nbsp; padding: 5px 8px;}.aqua {background-color:aqua;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <td class=click>1</td>&nbsp; &nbsp; <td class=click>2</td>&nbsp; &nbsp; <td class=click>3</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class=click>4</td>&nbsp; &nbsp; <td class=click>5</td>&nbsp; &nbsp; <td class=click>6</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class=click>7</td>&nbsp; &nbsp; <td class=click>8</td>&nbsp; &nbsp; <td class=click>9</td>&nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; <td></td>&nbsp; </tr></table>