我想計算每行中類別更改的單元格。我想要的結果如下所示。有什么辦法可以統計嗎？謝謝 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>
2 回答
揚帆大魚
TA貢獻1799條經驗 獲得超9個贊
您可以在每個 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>
隔江千里
TA貢獻1906條經驗 獲得超10個贊
您是否只對計算類別的單元格.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>
- 2 回答
- 0 關注
- 120 瀏覽
添加回答
舉報
0/150
提交
取消