Измените цвет букв таблицы согласно условию в javascript - PullRequest
0 голосов
/ 29 мая 2020

У меня стол с графиком смены офиса. где есть буквы, как показано ниже, но без какого-либо цвета. Я хочу обновить цвета, как показано ниже, в соответствии с буквой динамически Ex: AW => желтый, W => красный, T => зеленый и т.д. c ..

enter image description here

Приносим извинения, не удалось скопировать код с офисного компьютера, предоставлены образцы данных таблицы.

<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>

Пожалуйста, предложите.

1 Ответ

0 голосов
/ 29 мая 2020

Можно было бы добавить атрибут data при динамическом создании элементов и применить стили в зависимости от него

<td data-text="aw">
  AW
</td>
td[data-text="aw"] {
  background-color: yellow
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...