时间戳

首页 > 解决方案 > 根据javascript中的条件更改表格字母颜色

javascript - 根据javascript中的条件更改表格字母颜色

问题描述

我有我的办公室轮班表。它有如下所示的字母，但没有任何颜色。我想根据字母动态更新颜色如下：AW =>黄色，W =>红色，T =>绿色等。

在此处输入图像描述

抱歉，无法从办公机器复制代码，提供了示例表数据。

<table>
<tbody>
<tr><td class="t-Report-cell"  headers="EMPLOYEE">Rahul</td><td class="t-Report-cell"  headers="D1">M</td><td class="t-Report-cell"  headers="D2">M</td><td class="t-Report-cell"  headers="D3">M</td><td class="t-Report-cell"  headers="D4">M</td><td class="t-Report-cell"  headers="D5">M</td><td class="t-Report-cell"  headers="D6">O</td><td class="t-Report-cell"  headers="D7">O</td><td class="t-Report-cell"  headers="D8">M</td><td class="t-Report-cell"  headers="D9">M</td><td class="t-Report-cell"  headers="D10">M</td><td class="t-Report-cell"  headers="D11">M</td><td class="t-Report-cell"  headers="D12">M</td><td class="t-Report-cell"  headers="D13">M</td><td class="t-Report-cell"  headers="D14">M</td><td class="t-Report-cell"  headers="D15">M</td><td class="t-Report-cell"  headers="D16">M</td><td class="t-Report-cell"  headers="D17">M</td><td class="t-Report-cell"  headers="D18">M</td><td class="t-Report-cell"  headers="D19">M</td><td class="t-Report-cell"  headers="D20">M</td><td class="t-Report-cell"  headers="D21">M</td><td class="t-Report-cell"  headers="D22">M</td><td class="t-Report-cell"  headers="D23">M</td><td class="t-Report-cell"  headers="D24">M</td><td class="t-Report-cell"  headers="D25">M</td><td class="t-Report-cell"  headers="D26">M</td><td class="t-Report-cell"  headers="D27">M</td><td class="t-Report-cell"  headers="D28">M</td><td class="t-Report-cell"  headers="D29">M</td><td class="t-Report-cell"  headers="D30">M</td><td class="t-Report-cell"  headers="D31"></td></tr>
<tr><td class="t-Report-cell"  headers="EMPLOYEE">Srinivas</td><td class="t-Report-cell"  headers="D1">A</td><td class="t-Report-cell"  headers="D2">A</td><td class="t-Report-cell"  headers="D3">A</td><td class="t-Report-cell"  headers="D4">A</td><td class="t-Report-cell"  headers="D5">A</td><td class="t-Report-cell"  headers="D6">A</td><td class="t-Report-cell"  headers="D7">W</td><td class="t-Report-cell"  headers="D8">W</td><td class="t-Report-cell"  headers="D9">A</td><td class="t-Report-cell"  headers="D10">A</td><td class="t-Report-cell"  headers="D11">A</td><td class="t-Report-cell"  headers="D12">A</td><td class="t-Report-cell"  headers="D13">A</td><td class="t-Report-cell"  headers="D14">W</td><td class="t-Report-cell"  headers="D15">W</td><td class="t-Report-cell"  headers="D16">A</td><td class="t-Report-cell"  headers="D17">A</td><td class="t-Report-cell"  headers="D18">A</td><td class="t-Report-cell"  headers="D19">A</td><td class="t-Report-cell"  headers="D20">A</td><td class="t-Report-cell"  headers="D21">W</td><td class="t-Report-cell"  headers="D22">W</td><td class="t-Report-cell"  headers="D23">A</td><td class="t-Report-cell"  headers="D24">A</td><td class="t-Report-cell"  headers="D25">X</td><td class="t-Report-cell"  headers="D26">A</td><td class="t-Report-cell"  headers="D27">A</td><td class="t-Report-cell"  headers="D28">W</td><td class="t-Report-cell"  headers="D29">W</td><td class="t-Report-cell"  headers="D30">A</td><td class="t-Report-cell"  headers="D31"></td></tr>
<tr><td class="t-Report-cell"  headers="EMPLOYEE">Rajesh</td><td class="t-Report-cell"  headers="D1">M</td><td class="t-Report-cell"  headers="D2">M</td><td class="t-Report-cell"  headers="D3">M</td><td class="t-Report-cell"  headers="D4">M</td><td class="t-Report-cell"  headers="D5">M</td><td class="t-Report-cell"  headers="D6">O</td><td class="t-Report-cell"  headers="D7">W</td><td class="t-Report-cell"  headers="D8">W</td><td class="t-Report-cell"  headers="D9">M</td><td class="t-Report-cell"  headers="D10">M</td><td class="t-Report-cell"  headers="D11">M</td><td class="t-Report-cell"  headers="D12">M</td><td class="t-Report-cell"  headers="D13">M</td><td class="t-Report-cell"  headers="D14">W</td><td class="t-Report-cell"  headers="D15">W</td><td class="t-Report-cell"  headers="D16">M</td><td class="t-Report-cell"  headers="D17">M</td><td class="t-Report-cell"  headers="D18">M</td><td class="t-Report-cell"  headers="D19">M</td><td class="t-Report-cell"  headers="D20">M</td><td class="t-Report-cell"  headers="D21">W</td><td class="t-Report-cell"  headers="D22">W</td><td class="t-Report-cell"  headers="D23">M</td><td class="t-Report-cell"  headers="D24">M</td><td class="t-Report-cell"  headers="D25">M</td><td class="t-Report-cell"  headers="D26">M</td><td class="t-Report-cell"  headers="D27">M</td><td class="t-Report-cell"  headers="D28">W</td><td class="t-Report-cell"  headers="D29">W</td><td class="t-Report-cell"  headers="D30">M</td><td class="t-Report-cell"  headers="D31"></td></tr>
      </tbody>
</table>

请建议。

标签： javascripthtmljquery

解决方案

一个想法可能是data在动态创建元素并根据它应用样式的同时添加属性

<td data-text="aw">
  AW
</td>

td[data-text="aw"] {
  background-color: yellow
}

推荐阅读