【问题标题】:Change div class value based on value in database根据数据库中的值更改 div 类值
【发布时间】:2021-12-21 01:37:28
【问题描述】:

我有来自 $row['nomor'] 的数据,并使用引导程序将其转换为进度条。我的问题是,您能否提出,如果“nomor”低于 40(例如),它会将 div 类更改为 div class="progress-bar progress-bar-striped bg-danger" ,因此基于引导程序,该栏将很快将其颜色更改为红色。

<?php
$hasil=mysqli_query($mysqli,"SELECT * from test");               
$row=mysqli_fetch_array($hasil);
?>
<tr>
<td><a href="pages/examples/invoice.html"><?php echo $row['nama']; ?></a></td>
<td><?php echo $row['nomor']; ?></td>
<td><span class="badge rounded-pill bg-danger">Realisasi</span></td>
<td><div class="progress progress-sm">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $row['nomor']; ?>%"><?php echo $row['nomor']; ?>%</div></div></td>
</tr>

【问题讨论】:

    标签: php html css bootstrap-4


    【解决方案1】:

    你可以这样做。

    <?php
    $hasil=mysqli_query($mysqli,"SELECT * from test");               
    $row=mysqli_fetch_array($hasil);
    
    $progressBarClass = "bg-danger";
    
    if ($row['nomor'] < 40){
      $progressBarClass = "bg-warning";
    }
    elseif($row['nomor'] < 80){
       $progressBarClass = "bg-primary";
    }
    else{
       $progressBarClass = "bg-success";
    }
    ?>
    <tr>
        <td><a href="pages/examples/invoice.html"><?php echo $row['nama']; ?></a></td>
        <td><?php echo $row['nomor']; ?></td>
        <td><span class="badge rounded-pill bg-danger">Realisasi</span></td>
        <td><div class="progress progress-sm">
            <div class="progress-bar progress-bar-striped <?php echo($progressBarClass); ?> progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $row['nomor']; ?>%"><?php echo $row['nomor']; ?>%</div></div></td>
    </tr>
    

    【讨论】:

      猜你喜欢
      • 2021-04-25
      • 2015-11-02
      • 2012-09-02
      • 1970-01-01
      • 1970-01-01
      • 2019-07-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多