Question

我正在使用Awesome Tables（我将其称为AT）从Google表格文档中获取数据，并以可嵌入网站的格式显示数据。我在工作表中使用了HTML模板以AT表单显示数据，该表单利用了内联CSS格式。该模板仅用于表输出，因此，该表仅存在<body>元素-即我无权访问<head>部分，等等。

我从Google表格中获取了一条数据（$ {“状态”}），该数据可以插入以下三个文本输出之一：有效，已发送或已取消。调用输出的方法是：

<div style="display:inline-block;color:rgb(87, 87, 87);font-size: 14px;padding: 10px 10px 10px 0;flex-shrink: 0;margin-right: auto;text-transform: capitalize;">
      <p><b>Name:</b> ${"Name"}</p>
      <p><b>Start Date:</b> ${"Start Date"}</p>
      <p><b>Completed Date:</b> ${"Completed Date"}</p>
      <p><b>Status:</b> ${"Status"}</p>
</div>

我想对$ {“ Status”}的输出文本进行颜色格式化，以使“ Active” =橙色，“ Cancelled” =红色和“ Delivered” =绿色，但不是100％确定如何执行此操作。我已经读到我可能需要使用某种JavaScript来实现此目的，但是老实说，不知道从哪里开始。

任何帮助表示赞赏。

因此，根据收到的回复，这是我经过一些在线研究后首次尝试编写JavaScript。我要沿着正确的轨道前进吗？

var jobStatus = "${"Status"}";

if (jobStatus = "Delivered") {
  document.getElementById("status").style.color = "green";
} else if (jobStatus = "Active") {
  document.getElementById("status").style.color = "orange";
} else {
  document.getElementById("status").style.color = "red";
}

Answer 1

如果可以编辑html模板，我建议使用CSS类来应用颜色。因此，只需将值也用作css类，并创建一些css即可格式化您想要的文本格式（或其他格式）：

<div style="display:inline-block;color:rgb(87, 87, 87);font-size: 14px;padding: 10px 10px 10px 0;flex-shrink: 0;margin-right: auto;text-transform: capitalize;">
  <p><b>Name:</b> ${"Name"}</p>
  <p><b>Start Date:</b> ${"Start Date"}</p>
  <p><b>Completed Date:</b> ${"Completed Date"}</p>
  <p class="${"Status"}"><b>Status:</b> ${"Status"}</p>
</div>

css是静态的。您可以将其放在文档的标题部分中（我知道您没有动态访问权限，这种假设正确吗？）。否则，将其附加到主体的一些js也可以正常工作。

.Active {
   color: orange;
}
.Cancelled {
   color: red;
}
.Delivered {
   color: green;
}

根据输出文本在CSS中设置文本格式

1 个答案: