如何在PHP中根据数据库表值动态修改按钮的显示颜色

首先先定义按钮不同状态对应的样式，新增激活态的CSS规则：

/* 数据库值为0时的默认样式 */
.button.button1 {
  background-color: #cccccc;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
/* 数据库值为1时的激活样式 */
.button.button1.active {
  background-color: #27ae60;
  color: #ffffff;
}

接下来根据你的业务场景选对应实现逻辑即可： #

场景1：点击按钮后刷新页面（服务端渲染模式） #

渲染页面时直接从数据库查询对应字段的当前值，动态给按钮加active类即可，示例逻辑（以PHP为例，其他服务端框架语法逻辑一致）：

<?php
// 此处替换为你自己的数据库查询逻辑，把查询到的字段值存入$status变量
$status = 数据库查询得到的对应字段值;
?>
<button type = "submit" name="one" class="button button1 <?php echo $status == 1 ? 'active' : ''; ?>">B-1</button>

场景2：点击按钮后不刷新页面（异步提交模式） #

用JS监听按钮点击事件，异步请求后端修改数据库成功后，直接切换按钮的类名即可：

const submitBtn = document.querySelector('button[name="one"]');

// 页面初始化时先同步当前数据库状态
window.addEventListener('load', async () => {
  // 调用后端接口查询当前字段值，假设返回结果里status字段存的是0/1
  const res = await fetch('/你自己的查询接口地址');
  const data = await res.json();
  if (data.status === 1) {
    submitBtn.classList.add('active');
  }
})

// 监听按钮点击提交事件
submitBtn.addEventListener('click', async (e) => {
  e.preventDefault();
  try {
    // 提交修改请求到后端
    const updateRes = await fetch('/你自己的修改接口地址', {
      method: 'POST',
      body: new FormData(submitBtn.closest('form'))
    });
    if (updateRes.ok) {
      // 修改成功后切换按钮状态
      submitBtn.classList.toggle('active');
    }
  } catch (err) {
    console.error('提交失败', err);
  }
})

内容的提问来源于stack exchange，提问作者AL- AMIN