主页 / 问题 / 1255376
Accepted
Влад
Asked:2022-03-13 21:58:16 +0000 UTC2022-03-13 21:58:16 +0000 UTC

用颜色计数单元格

  • 772

桌子：

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

如何计算颜色为 #f2fcf2 的 trs 的数量，以便输出简单地获取值，在本例中为“2”。

javascript

2 个回答

  1. Best Answer

    当然，可以为此目的为选定的元素分配一些特殊的类，但如果不这样做，那么这段代码可以正常工作：

    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>

    • 2

  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>

    • 1

相关问题