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

 $('.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>