javascript - 更改包含在 <td> 标记中的某些值的字体颜色

Question

我有一个表格，其中填充了来自 API 的数据。在那里，我有几个由数据组成的单元格。建表代码如下:

<td class="myclass">
    <?php
        $myvar = explode(" ", $json["data"]);
        foreach($myvar as $v) {
            echo " " . round($v);
        }
    ?>
</td>

单元格可能包含多个值我想为每个值应用样式。

有什么方法可以将不同的字体颜色应用于 foreach 循环打印的不同值。例如，如果值低于 10，则为绿色，如果高于 20，则为红色，否则为橙色。我发现的是:

$(document).ready(function(){
    $('.mytable td.singlevalue').each(function(){
        if (Number($(this).text()) > 50) {
            $(this).css('color','#f00');
        }
    });
});

效果很好，但仅适用于包含单个值的单元格。

<td> 的示例有问题:<td class="myclass">62 69 62 62 68 66</td>

Answer 1

只需像下面这样更新您的 PHP:

<td class="myclass">
  <?php
$myvar = explode(" ", $json["data"]);
foreach ($myvar as $v) {
?>
   <span class='<?php
    echo round($v) > 50 ? ' green ' : 'red ';
?>'>
          <?php
    echo " " . round($v);
?>
</span>
    <?php
}
?>
</td>