如果数量列的数值小于10,如何更改表格行的背景颜色

时间:2017-08-21 13:00:45

标签: javascript php html

我正在实施布料购物网站,其中库存由管理员添加到数据库,管理员也可以查看,更新和删除库存。从数据库中显示表中的记录时,我希望库存数量为10或小于10的项目,行颜色变为红色,以便管理员注意特定库存量低。

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>

这是我的css代码:

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);
}

3 个答案:

答案 0 :(得分:0)

为什么在javascript

处理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 } ?>
swift package generate-xcodeproj

答案 1 :(得分:0)

您可以将/assets/s3files/user1/<FILES & FOLDERS HERE> 或css类回显到adapter = require('skipper-better-s3')({ key: 'xxxxxxxxx', secret: 'yyyyyyyyyyy', bucket: 'myBucket' }); adapter.read('/assets/s3files/user1/image/file1.jpg', (err, data) => { // data is now a Buffer containing the avatar }); 标记。

bgcolor

答案 2 :(得分:0)

您最好将类添加到数量为<td class="qty">的单元格中,然后像

一样查询它们
document.querySelectorAll(".qty")
        .forEach(td => +td.textContent < 10 && (td.parentElement.sytle.backgroundColor = "red"));