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}