jquery - 如何检查 td 是否为 :nth-child(3) is greater than or equal to a percentage?

Question

我目前正在编写一个网页来提取所有这些数据。此数据中有 3 个单独的表。在每个表中，我想检查 TR 中的第三个 td 是否大于或 = 百分比。

如何检查 {{opendiff}} (已经是百分比)是否大于或等于 18%(该百分比可以硬编码。)。该行应类似于:

goal | actual | % diff

100%  | 43% | 57%

如果 diff% 低于 50%，我希望它使用 jquery toggleClass() 这样我就可以使行变成红色(我已经为这些 TR 行创建了类，但我不知道如何实现检查以查看是否大于等)。

<tr>
    <td class="hide-on-large-only">Dialer</td>
    <td>18 %     </td>
    <td>{{opentransfer}}</td>
    <td>{{opendiff}}</td>
    <td class="hide-on-med-and-down"></td>
</tr>

我找到了我的 jquery 函数 jQuery toggleClass() 方法。我只是不知道如何检查 TD 是否大于 % 以使 jquery toggleClass()。

Answer 1

甚至不需要 jQuery:

const cells = Array.from(document.querySelectorAll(".opendiff"));

// fill in random values
for(const cell of cells) {
    cell.innerHTML = (Math.round(Math.random()*1000)/10) + " %";
}

// I set t to 50 to make it more likely for red values
const maxPercentage = 50;
// for each cell, as above
for(const cell of cells) {
    cell.classList.toggle("red",parseFloat(cell.textContent)<maxPercentage);
}

table td {
 background-color: #cceeFF;
}
td.red {
  background-color: #FFDDDD;
}

<table>
<tbody>
<tr>
    <td class="hide-on-large-only">Dialer</td>
    <td>18 %     </td>
    <td>{{opentransfer}}</td>
    <td class="opendiff">{{opendiff}}</td>
</tr>
<tr>
    <td class="hide-on-large-only">Dialer</td>
    <td>18 %     </td>
    <td>{{opentransfer}}</td>
    <td class="opendiff">{{opendiff}}</td>
</tr>
<tr>
    <td class="hide-on-large-only">Dialer</td>
    <td>18 %     </td>
    <td>{{opentransfer}}</td>
    <td class="opendiff">{{opendiff}}</td>
</tr>
<tr>
    <td class="hide-on-large-only">Dialer</td>
    <td>18 %     </td>
    <td>{{opentransfer}}</td>
    <td class="opendiff">{{opendiff}}</td>
</tr>
</tbody>
</table>