Подсчитать ячейки с цветом

Question

Таблица:

<tbody>
<tr class="list" style="background:#f2fcf2;">
<td></td>
<td></td>
</tr>
<tr class="list" style="background:#f2fcf2;">
<td></td>
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
</table>

Как в ней подсчитать количество tr с цветом #f2fcf2, чтоб на выходе просто получить значение, в данном случае "2".

Answer 1

Конечно, можно было бы присвоить какой-либо особенный класс для выделенных элементов для этих целей, но если этого не делать, то этот код прекрасно работает:

let color = "#f2fcf2;";
let num = 0;

window.onload = function() {
    let table = document.getElementsByTagName("table")[0];
    let trs = table.getElementsByTagName("tr");
    
    for (let tr of trs) {
        if (tr.getAttribute("style").includes("background:" + color)) num++;
    }

    console.log(num);
}

<table>
<tr class="list" style="background:#f2fcf2;">
<td></td>
<td></td>
</tr>
<tr class="list" style="background:#f2fcf2;">
<td></td>
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
</table>

Answer 2

Например, так:

const trs = [...document.querySelector('table').rows];

console.log(
  trs.filter(
    tr => tr.getAttribute('style').includes('background:#f2fcf2;')
  ).length
);

<table>
<tbody>
<tr class="list" style="background:#f2fcf2;">
<td></td>
<td></td>
</tr>
<tr class="list" style="background:#f2fcf2;">
<td></td>
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
<tr class="list" style="background:#275c3b;">
<td></td>
</tr>
</tbody>
</table>

БЛОГ НА HUSL

Подсчитать ячейки с цветом

Ответы (2 шт):