如何检查 td:nth-child(3) 是否大于或等于百分比？

Question

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

如何检查{{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>