Javascript 如何使用Bootstrap在该单元上放置徽章？_Javascript_Html_Google Apps Script

Javascript 如何使用Bootstrap在该单元上放置徽章？

javascript html google-apps-script

Javascript 如何使用Bootstrap在该单元上放置徽章？,javascript,html,google-apps-script,Javascript,Html,Google Apps Script,这就是我现在拥有的：我想在结果栏下放置一个徽章，如下图所示，而不是将整行着色，这样，例如，绿色徽章中会显示GOOD crud.html <html> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1P

这就是我现在拥有的：

我想在结果栏下放置一个徽章，如下图所示，而不是将整行着色，这样，例如，绿色徽章中会显示GOOD

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">Number</th>
      <th scope="col" style="width: 20%" class="text-center">Name</th>
      <th scope="col" style="width: 61%" class="text-center">Present</th>
      <th scope="col" style="width: 10%" class="text-center">Result</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){
    if(v.textContent === 'GOOD') {
      $(v.parentElement).addClass('table-success');
    } else if(v.textContent === 'BAD') {
      $(v.parentElement).addClass('table-danger');
    }
  })  
})

</script>
<html>

您可以将元素设置为HTML。您可以在foreach循环中这样做：

if（v.textContent=='GOOD'）{
$（v.html（'GOOD'）；
}else if（v.textContent=='BAD'）{
$（v.html（'BAD'）；
}

它成功了。非常感谢你。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('crud');
}