javascript - HTML/CSS/JavaScript : How to change color of table row based on data

标签 javascript jquery html css angularjs

首先,我知道这可能是重复的,但我尝试了其他解决方案,但没有任何效果。无论如何,我有一个 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>

因此等级可以是BasicMiddleAdvanced。如果排名是 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/

相关文章:

javascript - 悬停时的语义 ui 下拉菜单

javascript - 如何设置 OnClientClick 值 - 语法?

javascript - 如何使用 Mocha 创建自定义记者

javascript - 尝试对简单对象执行 JSON.parse 时出现 "Unexpected token"错误

javascript - 在 d3 中应用缩放平移和轴重新缩放

JavaScript/jQuery - 通过文本从选择菜单中获取选项属性

html - 我怎样才能让这个边框环绕我的 div?

php - 使用window.print时如何固定打印区域的大小?

Javascript 用 props 扩展类?

html - EM 尺寸输入上的 IE 渲染错误