Question

我正在尝试使用CSS和\或JS制作一个将文本更改为图标的小脚本。基本上，我有一个网页，一个商店的后端，他们有页面和页面，其中的订单以表格形式列出，每个订单都有三种状态之一，处理，处理和取消。我需要做的是应用图标甚至彩色背景，例如红色到“处理”状态，绿色到“已处理”，黄色到“已取消”。我需要使用脚本执行此操作，因为我无法访问后端中的所有文件，但我可以访问页眉和页脚。

很难在包含100个其他订单的页面中找到状态为“处理”的订单。红色的文字会立即弹出！

Answer 1

您可以循环遍历.left元素并将单元格的textContent与要匹配的内容进行比较，并有条件地指定一个可以使用CSS修改的类。

＆＃13;

var els = document.getElementsByClassName('left');
for (var i = 0; i < els.length; i++) {
  var string = els[i].textContent,
      colorClass = false;
  if (string == 'Processing' || string == 'Processed' || string == 'Canceled') {
    colorClass  = string.toLowerCase(); 
  }
  if (colorClass) {
    els[i].classList.add(colorClass);
  }
}

＆＃13;

.processing {
  color: red;
}
.processed {
  color: green;
}
.canceled {
  color: yellow;
}

＆＃13;

<table>
  <tr>
    <td class="left">Processing</td>
    <td class="left">Processed</td>
    <td class="left">Canceled</td>
    <td class="">Canceled</td> <!-- shouldn't match -->
    <td class="left">foobar</td> <!-- shouldn't match -->
  </tr>
</table>

＆＃13;

将所有字符串实例更改为页面上的图标

1 个答案: