HTML/CSS/JavaScript：如何根据数据更改表格行的颜色

Question

首先，我知道这可能是重复的，但我尝试了其他解决方案，没有任何工作。总之，我有一个表在HTML：

<table class="table1"> 
     <tr> 
      <th>Rank</th> 
      <th>Name</th> 
      <th>Picture</th> 
      <th>Serial Number</th> 
     </tr> 
     <tbody class="tbody" > 
      <tr class="bodyrow" ng-repeat="item in rank track by $index"> 
       <td>{{item}}</td> 
       <td>{{name[$index]}}</td> 
       <td> <img ng-src="{{img[$index]}}"/></td> 
       <td>{{serialNumber[$index]}}</td> 
      </tr> 
     </tbody> 

    </table> 

所以队伍可以Basic，Middle，或者Advanced。如果排名是Basic那么该条目的整行应该是蓝色的。如果排名为Middle，则该条目的行应为黄色，而Advanced应使该行变为绿色。有人可以帮忙吗？

Answer 1

标记（假设{{项目}}有秩名）：

<table class="table1"> 
    <tr> 
     <th>Rank</th> 
     <th>Name</th> 
     <th>Picture</th> 
     <th>Serial Number</th> 
    </tr> 
    <tbody class="tbody" > 
     <tr class="bodyrow" ng-class="item" ng-repeat="item in rank track by $index"> 
      <td>{{item}}</td> 
      <td>{{name[$index]}}</td> 
      <td> <img ng-src="{{img[$index]}}"/></td> 
      <td>{{serialNumber[$index]}}</td> 
     </tr> 
    </tbody> 

</table> 

样式：

.basic{background: blue} 
.middle{background: yellow} 
.advanced{background: green}