jQuery CSS在值更改时更改表格颜色答案

【问题标题】：jQuery CSS change table color when value changesjQuery CSS在值更改时更改表格颜色
【发布时间】：2020-02-03 18:34:45
【问题描述】：

我希望每次我的值低于 10 时，我的表格行的背景颜色都会变为红色。

每次我的值 >=10 时，行的背景颜色都会变为绿色。

这应该发生在我的所有行上。

jQuery 代码

$(document).ready(function(){
    var value = $("#value10").val();
    var valueNum = parseInt(value);
        if  (valueNum < 10){
            $("#row").css({
            backgroundColor: 'red'
        });
        }else{
            $("#row10").css({
            backgroundColor: 'green'
        });
        }    
});

PHP 代码 - 表格

<table>  
    <thead>
        <tr>
            <th>ID</th>
            <th>Περιγραφή</th>
            <th>Kατασκευαστής</th>
            <th>Σειρά</th>
            <th>Χρώμα</th>
            <th>Μήκος</th>
            <th>Ποσότητα</th>
            <th>Τοποθεσία</th>    
        </tr>
    </thead>


    <tbody>

                <?php
                    $sql = "SELECT * FROM stock_alumil;";
                    $result = mysqli_query($conn, $sql);      
                    $resultCheck = mysqli_num_rows($result);
                    if ($resultCheck > 0) {
                        while  ($row = mysqli_fetch_assoc($result)){
                ?>
        <tr id="row10"> 
            <td style="font-weight: bold"><?php echo $row['id']; ?></td>
            <td style="font-style: italic;"><?php echo $row['name']; ?></td>
            <td style="font-style: oblique;"><?php echo $row['buyer']; ?></td>
            <td style="font-style: italic;"><?php echo $row['seira']; ?></td>          
            <td><?php echo $row['color']; ?></td>
            <td><?php echo $row['length']; 
            echo " (mm)";?></td>
            <td id="value10" style="font-weight: bold"><?php echo $row['value'];?></td> 
            <td><?php echo $row['place'];?></td>    
        </tr>


                <?php
                    }    
                }

                ?>

    </tbody>
</table>

有什么想法吗？

【问题讨论】：

我认为这不需要jQuery或javascript，你可以在CSS和PHP中使用，只需检查php中的值，根据值添加两种情况的属性类。
很好@mamounothman 出于某种原因，我只是假设这些是表单输入
td 元素没有属性val 使用$("#value10").text();

标签： php jquery css

【解决方案1】：

也许你不需要 jQuery，你可以用 PHP 来做：

<td id="value10" style="font-weight: bold; background: <?= ($row['value'] >= 10 ? 'green' : 'red'); ?>"><?= $row['value'];?></td>

我们使用的是 PHP 的short-hand ternary operator。

我还将<?php echo 更改为简写<?=（完全相同）。对于最后这件事，您可能需要检查您的服务器是否支持它（从 5.4+ 版本开始可用）。

【讨论】：

成功了，谢谢！如果我有 3 个参数怎么办？比如：如果 $row['value'] = 0 然后 red ，否则如果 $row['value'] >0& $row['value']
我的主要建议是您不要创建这样的“意大利面条代码”，并在之前进行所有这些值检查（eg 在脚本的上半部分，或者使用任何类型的应用程序设计模式（如 MVC），而不是在 HTML 中执行。您最终会学到这些东西，但您可能想进一步了解这些内容 - 越早越好。