[英]How to change Background color of Table row if the value of column is same?
[英]How to change background color of table row if quantity column has numeric value less than 10
我正在實施布料購物網站,在該網站中,管理員將庫存添加到庫存中,並且管理員也可以查看,更新和刪除庫存。 在數據庫中的表中顯示記錄時,我希望庫存數量等於10或小於10的項目該行顏色變為紅色,以便管理員應警惕特定庫存數量低。
碼:
<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);
}
為什么可以使用php
處理javascript
?
<?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
}
?>
您可以在<tr>
標記中回顯bgcolor
或css類。
<tr <?php if($result['dress_quantity'] < 10){ echo "bgcolor='#FF0000';} ?>
您最好將一個類添加到數量為<td class="qty">
,然后查詢它們,例如
document.querySelectorAll(".qty")
.forEach(td => +td.textContent < 10 && (td.parentElement.sytle.backgroundColor = "red"));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.