如何为HTML表格状态列的数据库值应用Bootstrap标签样式

Got it! 我来帮你把数据库返回的状态值转换成Bootstrap的标签样式，让表格看起来更直观美观。咱们直接修改你现有的AJAX渲染代码就行：

1. 先准备状态与Bootstrap样式的映射 #

首先定义一个对象，把数据库里的状态值和对应的Bootstrap背景色类绑定起来——这样以后新增状态只需要在这里加，不用改循环逻辑，维护起来超方便：

const statusBadgeMap = {
  'Active': 'bg-success',          // 绿色标签
  'Inactive': 'bg-danger',         // 红色标签
  'Pending': 'bg-warning text-dark',// 黄色标签，加text-dark避免浅色文字看不清
  'Completed': 'bg-primary',       // 蓝色标签
  'Processing': 'bg-info'          // 浅蓝色标签
};

注意：如果你用的是Bootstrap 4，样式类要改成badge badge-success这种格式，而不是Bootstrap 5的badge bg-success哦！

2. 修改AJAX的success回调逻辑 #

在你拼接表格行的时候，把原始的状态值替换成Bootstrap的<span>标签。我帮你补全了完整的success函数逻辑（假设你的状态字段叫Status，返回的数据在data.d里，这是ASMX接口的常规返回格式）：

success: function (data) {
  // 状态与Bootstrap标签样式的映射
  const statusBadgeMap = {
    'Active': 'bg-success',
    'Inactive': 'bg-danger',
    'Pending': 'bg-warning text-dark',
    'Completed': 'bg-primary'
  };

  var $table = "<table id='tblStockData' width='100%' class='table table-striped table-bordered table-hover'>";
  // 补充状态列的表头
  var header = "<thead><tr><th style='text-align:center;'>S.No</th><th>Shipment</th><th>Chassis No</th><th>Status</th></tr></thead>";
  $table += header;
  $table += "<tbody>";

  // 遍历返回的每一条数据
  $.each(data.d, function(index, item) {
    // 获取当前状态对应的样式，找不到匹配的就用灰色兜底
    const statusClass = statusBadgeMap[item.Status] || 'bg-secondary';
    // 把状态值包装成Bootstrap标签
    const statusBadge = `<span class="badge ${statusClass}">${item.Status}</span>`;

    // 拼接表格行，把原始状态替换成标签
    $table += `<tr>
      <td style='text-align:center;'>${index + 1}</td>
      <td>${item.Shipment}</td>
      <td>${item.ChassisNo}</td>
      <td>${statusBadge}</td>
    </tr>`;
  });

  $table += "</tbody></table>";
  // 把生成好的表格插入到页面的容器里（比如你页面上有个id为stockTableContainer的div）
  $('#stockTableContainer').html($table);
}

3. 几个关键细节提醒 #

• 大小写匹配：确保item.Status的字符串和映射对象里的键完全一致（比如数据库返回的是active小写，那映射对象的键也要改成'active'，或者用item.Status.toLowerCase()统一转小写）。
• Bootstrap依赖：一定要确保你的页面已经引入了Bootstrap的CSS文件，不然标签样式不会生效哦！
• 兜底样式：我加了bg-secondary作为默认样式，如果数据库里出现了映射对象里没有的状态，会显示灰色标签，避免样式缺失。

这样修改之后，你的表格状态列就会显示带颜色的Bootstrap标签啦！

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