首先,我知道这可能是重复的,但我尝试了其他解决方案,但没有任何效果。无论如何,我有一个 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
应使该行变为绿色。有人可以帮忙吗?
最佳答案
标记(假设 {{item}} 有等级名称):
<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}
关于javascript - HTML/CSS/JavaScript : How to change color of table row based on data,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35800456/