如何用JavaScript修改表格中“Nonaktif”徽章的文本样式为红色？

首先要指出一个小问题：你当前的PHP代码里给状态徽章用了重复的id="status"——如果这是循环渲染的表格行，每个行的徽章都会有同一个id，这违反了HTML中id必须唯一的规则，会导致后续JS无法正确选中所有徽章。所以第一步建议把id改成class，比如status-badge，这样才能正常操作所有状态元素。

第一步：修正PHP渲染代码 #

把状态列的span部分修改为：

<td><h5><span class="status-badge badge badge-pill badge-success"><?php echo $bk->status_kas?></span></h5></td>

第二步：原生JavaScript实现样式修改 #

我们可以在DOM加载完成后，遍历所有状态徽章，检查其文本内容是否为Nonaktif，如果是，就将Bootstrap的绿色成功徽章样式替换为红色危险样式：

// 等待页面DOM完全加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有状态徽章元素
  const statusBadges = document.querySelectorAll('.status-badge');
  
  // 逐个处理每个徽章
  statusBadges.forEach(badge => {
    // 去除文本前后的空白字符，避免空格/换行干扰判断
    const statusText = badge.textContent.trim();
    if (statusText === 'Nonaktif') {
      badge.classList.remove('badge-success');
      badge.classList.add('badge-danger');
    }
  });
});

如果你项目使用jQuery，可选用这个简化版本 #

$(document).ready(function() {
  $('.status-badge').each(function() {
    const statusText = $(this).text().trim();
    if (statusText === 'Nonaktif') {
      $(this).removeClass('badge-success').addClass('badge-danger');
    }
  });
});

补充说明：使用trim()是为了处理可能存在的渲染空白（比如PHP输出时的换行或空格），确保判断准确；通过修改class而不是直接设置内联样式，能更好地遵循Bootstrap的样式体系，也更便于后续维护。

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