jQuery CSS change table color when value changes

Question

I want every time my value is below 10, my table row's background color changes into red.

And every time my value is >=10 then row's background color changes into green.

This should happen for all of my rows.

jQuery Code

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

PHP Code - Table

<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>

Any ideas?

I don't think this need jQuery or javascript, you can have this in CSS and PHP, just check the value in php, add attribute class for both cases based on the value. — ROOT
– ROOT, Commented Feb 3, 2020 at 18:55
Good catch @mamounothman For some reason I just assumed that these were form inputs — Patrick Q
– Patrick Q, Commented Feb 3, 2020 at 18:58
td element have not property val use $("#value10").text(); — Slava Rozhnev
– Slava Rozhnev, Commented Feb 3, 2020 at 20:00

Jimmy Adaro · Accepted Answer · 2020-02-03 20:56:35Z

1

Maybe you don't need jQuery, you can do it with PHP:

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

There we are using a PHP's short-hand ternary operator.

Also I changed <?php echo to the short-hand <?= (it does exactly the same). For this last thing, you may want to check if your server supports it (available since version 5.4+).

answered Feb 3, 2020 at 20:56

Jimmy Adaro

1,43516 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Koun Over a year ago

it worked thanks ! What if i have 3parameters? Like: if $row['value'] = 0 then red , else if $row['value'] >0& $row['value'] <10 then οrange else green.

Jimmy Adaro Over a year ago

My main suggestion is that you don't create such a "spaghetti code", and do all those value checks before (e.g. in the upper section of your script, or using any kind of application design pattern like MVC) instead of doing it inside the HTML. You'll eventually learn those things, but you may want to read further about that - the sooner the better.

Collectives™ on Stack Overflow

jQuery CSS change table color when value changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related