如何根据数据库nomor字段值动态修改Bootstrap进度条的class属性

你可以直接通过PHP服务端判断数值区间，动态输出对应的Bootstrap进度条类即可实现需求，修改后的完整代码如下：

<?php
$hasil = mysqli_query($mysqli, "SELECT * from test");               
$row = mysqli_fetch_array($hasil);
// 新增进度条样式判断逻辑
$nomor = (int)$row['nomor'];
$progressBaseClass = 'progress-bar progress-bar-striped progress-bar-animated';
if ($nomor < 40) {
    $progressBgClass = 'bg-danger';
} elseif ($nomor < 70) {
    $progressBgClass = 'bg-warning';
} else {
    $progressBgClass = 'bg-success';
}
$progressFullClass = $progressBaseClass . ' ' . $progressBgClass;
?>
<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="<?php echo $progressFullClass; ?>" 
      role="progressbar" 
      aria-valuenow="<?php echo $nomor; ?>" 
      aria-valuemin="0" 
      aria-valuemax="100" 
      style="width: <?php echo $nomor; ?>%"
    >
      <?php echo $nomor; ?>%
    </div>
  </div>
</td>
</tr>

说明 #

• 代码中先把$row['nomor']强制转为数值类型，避免字符串比较出错
• 默认设置了三个区间规则：小于40显示红色（危险）、40-69显示黄色（警告）、70及以上显示绿色（成功），你可以根据自己的需求调整区间阈值和对应的Bootstrap背景类
• 同时修正了原代码中aria-valuenow硬编码为75的问题，改为动态匹配数值，符合无障碍规范
• 不需要额外引入JavaScript，服务端渲染的方式执行效率更高，适合从数据库读取固定值渲染的场景

内容的提问来源于stack exchange，提问作者Reehan Piprut