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

Question

我目前正在编写一个提取所有这些数据的网页。在此数据中，有 3 个独立的 table。在每个 table 中，我想检查第 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>

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

How do I check if td:nth-child(3) is greater than or equal to a percentage?

jquery

node.js

express

handlebars.js