更改负数字体css

Question

当数字低于0时，我试图将字体颜色更改为红色。由于stackoverflow的答案，我已经设法让整行变为红色，但无法将其交给字体本身。

<?php echo $coin_gain; ?>显示一个可以否定的数字。

<tr>
    <td><?php echo $coin_name; ?></td>
    <td><?php echo $coin_price; ?></td>
    <td class="status"><?php  echo $coin_gain; ?>%</td>
</tr>

<script>
    $(document).ready(function() {
        $(".status").each(function(){
            var value = parseInt ( $( this).html() );
            if (value < 0){
                $(this).parent().css('background-color', 'red');
            }
        });
    });
</script>

Answer 1

<tr>
    <td><?php echo $coin_name; ?></td>
    <td><?php echo $coin_price; ?></td>
    <td class="status"><?php  echo $coin_gain; ?>%</td>
</tr>

<script>
    $(document).ready(function() {
        $(".status").each(function(){
            var value = parseInt ( $( this).html() );
            if (value < 0){
                $(this).css('color', 'red');
            }
        });
    });
</script>

您只需要删除父选择器以定位单元本身而不是行。

Answer 2

如果使用PHP输出，那么也使用PHP处理类：

对于字体颜色，它是color: #000000而不是background-color

<?php $isPositive = $coin_gain >= 0; ?>
<tr style="background-color: <?= $isPositive ? 'green' : 'red'; ?>>
    <td><?= $coin_name; ?></td>
    <td><?= $coin_price; ?></td>
    <td class="status" style="color: <?= $isPositive ? 'green' : 'red'; ?>><?= echo $coin_gain; ?>%</td>
</tr>

Answer 3

如果您想要定位单元格，请删除.parent()：

if (value < 0){
    $(this).css('color', 'red');
} else {
    $(this).css('color', 'green');
}

当你添加.parent()时，你定位你的单元格的包含元素（<td>），这是行（<tr>）

Answer 4

<tr>
    <td><?php echo $coin_name; ?></td>
    <td><?php echo $coin_price; ?></td>
    <td class="status"><?php  echo $coin_gain; ?>%</td>
</tr>

<script>
    $(document).ready(function() {
        $(".status").each(function(){
            var value = parseInt ( $( this).html() );
            if (value < 0){
                // this will change the color of font 
                $(this).css('color', 'red');
            }
        });
    });
</script>