javascript - 根据列值更改表格行的颜色

标签 javascript html css angularjs

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 7 年前

我正在使用具有列状态的 ng-repeat 获取数据。我想根据状态更改行颜色,即如果状态已批准,行颜色设置为绿色,如果状态被拒绝,则行颜色为设置为红色。有人能帮忙吗..提前致谢

最佳答案

在您的问题中包含一些代码片段通常是一种很好的做法,以便我们更好地理解您的问题。没有它,我们只能做出很可能不是您想要或不适合您的风格的疯狂猜测。

我假设您的数据由 <tr> 填充在 ng-repeat

<tr ng-repeat="row in tableData" ng-class="{approved: row.status == 1, rejected: row.status == 0}">
  <td>{{row.data1}}</td>
  <td>{{row.data2}}</td>
</tr>

CSS:

tr.approved { background-color: green }
tr.rejected { background-color: red }

以上是根据特定条件对数据应用特定样式的更合适的方法。

如果你想要快速而肮脏的方式,你也可以直接应用样式

<tr ng-repeat="row in tableData" ng-style="{'background-color': ((row.status == 1) ? 'green' : (row.status == 0) ? 'red' : '') }">
  <td>{{row.data1}}</td>
  <td>{{row.data2}}</td>
</tr>

关于javascript - 根据列值更改表格行的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32899921/

上一篇:javascript - CSS 旋转。旋转 div 但保持在完全相同的坐标?

下一篇:jquery - 视差 js 不工作...图像不显示

相关文章:

html - 我可以以未安装字体的用户身份查看我的网站吗?

javascript - D3实时绘图: slide from right&shift data as data length exceeds limit transition is not working

javascript - 使用 jquery 在自动完成组合框中使用 EL 表达式获取列表或数组中的所有元素

css - 在 Twitter Bootstrap 中将 .span9 内容居中?

javascript - 如何在没有内联样式的情况下使用 Javascript 在表单上突出显示颜色?

html - 我可以设置样式/修改/删除可滚动 div 的滚动条吗

javascript - react 超出最大调用堆栈大小

javascript - 将用户图像添加到 Rails 中的 jquery ui 自动完成中

javascript - 如何让div以100%的宽度和高度填充其容器?

html - 如何使用css来进行这样的设计?