<td>を文字列によって色分け

Question

いつもお世話になっております。

現在、html5とcss3,mongodb,node.js,javascriptでSPAを作っているのですが、
テーブルに追加したい機能があります。
加入プランに応じて色分けをしたいというものです。
Aプランなら青色、Bプランなら赤色といった具合です。

一番簡単な方法で、色を切り替えるにはどうすればいいでしょうか？
何卒よろしくお願いいたします。

  <table style ="margin-top:50px;margin-left:0px;" class ="sonpo"  >

    <tr>
    <th colspan ="9" scope ="colgroup">顧客情報管理一覧</th>
    </tr>


        <th>契約者</th>
        <th>登録住所</th>
        <th>連絡先</th>
        <th>プラン</th>
  



      <tr ng-repeat="user in users| filter: filterByRange | filter:{name: objProp1LastNameFilter, manki:objProp1MankiFilter}"> <!--DBテーブルusersからuserを順に配列-->

      <td>{{user.name}}</td>
      <td><a href= "https://www.google.com/maps/place/{{user.jyusho}}" target="_blank">{{user.jyusho}}</a></td>
      <td><a href="tel:{{user.number}}">{{user.number}}</a></td>
      <td>{{user.plan}}</td>



</table>

Comments

[kei344]

コードブロックは''' ではなく```（バッククオート3つ）です。

[zyunnsalome]

ありがとうございます。

Answer 1

属性セレクタを利用してみるとか。

<td data-plan="{{user.plan}}">{{user.plan}}</td>

td[data-plan="Aプラン"] { color: red; }
td[data-plan="Bプラン"] { color: blue; }

trに適宜クラスを付けるのが良い気もしますが、こういう手段もあるということで。

Comments

[zyunnsalome]

非常に助かりました。応用も利かせられて便利です。