如何使用Bootstrap在表格Result列单元格中添加状态徽章替代整行变色？

你只需要修改crud.html中的jQuery逻辑即可，你项目中已经引入了Bootstrap 4，直接使用自带的徽章（Badge）组件就能实现需求，无需额外引入其他资源，code.gs文件不需要做任何调整。

修改后的crud.html完整代码 #

<html>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
  <thead>
    <tr>
      <th scope="col" style="width: 8%" class="text-center">序号</th>
      <th scope="col" style="width: 20%" class="text-center">名称</th>
      <th scope="col" style="width: 61%" class="text-center">展示内容</th>
      <th scope="col" style="width: 10%" class="text-center">结果</th>
    </tr>
  </thead>
  <tr>
    <td class="text-center">01</td>
    <td class="text-center">$title01</td>
    <td>$present01</td>
    <td scope="row" class="text-center">GOOD</td>
  </tr>
  <tr>
    <td class="text-center">02</td>
    <td class="text-center">$title02</td>
    <td>$present02</td>
    <td scope="row" class="text-center">BAD</td>
  </tr>
  <tr>
    <td class="text-center">03</td>
    <td class="text-center">$title03</td>
    <td>$present03</td>
    <td scope="row" class="text-center">GOOD</td>
  </tr>
</table>

<script>
  $(document).ready(function() {
    $('.table tr td').each(function(i, v){
      const text = v.textContent.trim()
      if(text === 'GOOD') {
        // 替换为绿色圆角徽章
        $(v).html(`<span class="badge badge-success badge-pill">${text}</span>`)
      } else if(text === 'BAD') {
        // 替换为红色圆角徽章
        $(v).html(`<span class="badge badge-danger badge-pill">${text}</span>`)
      }
    })  
  })
</script>
</html>

调整说明 #

• 移除了原来给整行tr添加背景色的逻辑，改为直接操作结果列对应的td元素
• 使用Bootstrap自带的badge类实现徽章基础样式，badge-success对应绿色、badge-danger对应红色，badge-pill实现大圆角效果，和需求示例样式一致
• 如果不需要圆角效果，去掉badge-pill类即可调整为直角徽章

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