How to change background color of table row if quantity column has numeric value less than 10

Question

I am implementing cloth shopping website in which stock is added to the database by admin and admin can view, update and delete stock as well. while displaying record in table from the database I want that the item from stock thats quantity becomes 10 or less than 10 that row color becomes red so that it should be alert for admin that particular stock quantity is low.

CODE:

<table id="myTable">
    <tr>
        <th>Sr.No</th>
        <th>Product ID</th>
        <th>Brand</th>
        <th>Price</th>
        <th>Gender</th>
        <th>Category</th>
        <th>Material</th>
        <th>Size</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Image</th>
    </tr> 
    <?php 
    $query = "SELECT * FROM add_stock ORDER BY id DESC; 
    $rs_result = mysqli_query ($query);
    while ($result=mysqli_fetch_array($rs_result) )
    {
    ?>
        <tr>
            <td><?php echo $result['id']; ?></td>
            <td><?php echo $result['brand_name'];</td>
            <td><?php echo $result['price']; ?></td>
            <td><?php echo $result['gender_name']; ?></td>
            <td><?php echo $result['category_name']; ?></td>
            <td><?php echo $result['material_name']; ?></td>
            <td><?php echo $result['size_name']; ?></td>
            <td><?php echo $result['dress_description']; ?></td>
            <td><?php echo $result['dress_quantity']; ?></td>
            <td><a href="javascript:window.open('<?php echo $result['image'] ?>','mypopuptitle', '_parent')" >View Image</a></td>
        </tr>
</table>
<?php
}
?>

<script type="text/javascript">
$('#myTable tr td').each(function(){
  var cellValue = $(this).html();
  if(!isNaN(parseFloat(cellValue))) {
    if (cellValue <= 10) {
      $(this).css('background-color','red');
    } 
  }
});  
</script>

---

this is my css code:

table {  
    color: #333;
    font-family: Helvetica, Arial, sans-serif;

    border-collapse: 
    collapse; border-spacing: 0; 
}

td, th {  
    border: 1px solid; /* No more visible border */
    height: 30px; 

    transition: all 0.3s;  /* Simple transition for hover effect */
}

th {  
    background: #DFDFDF;  /* Darken header a bit */
    font-weight: bold;
    text-align: center;
    height: 50px;
}

td {  
    background: #FAFAFA;

     height: 40px;
}

/* Cells in even rows (2,4,6...) are one color */        
tr:nth-child(even) td { background: #F1F1F1; }   

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */        
tr:nth-child(odd) td { background: #FEFEFE; }  

tr td:first-child:before
{

counter-increment: Count-Value;
content: "" counter(Count-Value);
}

Answer 1

Why use javascript when you can handle that by php

<?php 
$query = "SELECT * FROM add_stock ORDER BY id DESC; 
            $rs_result = mysqli_query ($query);
               while ($result=mysqli_fetch_array($rs_result) )
        {
          ?>
        /*Check if qty is less then 10 echo style=background-color:red*/
          <?php qty = (int)$result['dress_quantity']; ?>                    
          <tr <?php if(qty<10){echo 'style=" background: red !important;"';} ?>>
            <td><?php echo $result['id']; ?></td>
            <td><?php echo $result['brand_name'];</td>
            <td><?php echo $result['price']; ?></td>
            <td><?php echo $result['gender_name']; ?></td>
            <td><?php echo $result['category_name']; ?></td>
            <td><?php echo $result['material_name']; ?></td>
            <td><?php echo $result['size_name']; ?></td>
            <td><?php echo $result['dress_description']; ?></td>
            <td><?php echo $result['dress_quantity']; ?></td>
            <td><a href="javascript:window.open('<?php echo $result['image'] 
       ?>','mypopuptitle', '_parent')" >View Image</a></td>

          </tr>
   </table>

          <?php
        }

        ?>

Answer 2

您可以在<tr>标记中回显bgcolor或css类。

<tr <?php if($result['dress_quantity'] < 10){ echo "bgcolor='#FF0000';} ?>

Answer 3

You better add a class to the cells with quantity like <td class="qty"> and then query for them like

document.querySelectorAll(".qty")
        .forEach(td => +td.textContent < 10 && (td.parentElement.sytle.backgroundColor = "red"));