如何有条件地更改 HTML 中表格行的颜色？

Question

我有一张表，其中一行的背景颜色需要动态更改。 例如，如果数据大于 5，则颜色应为绿色，否则应为红色。

Answer 1

可以用 css 完成（如果结构合适）

 td { border: 1px solid ; padding: 5px; position: relative; width: 50px; } .item { position: relative; z-index: 2; } .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .item:nth-child(1) ~ .bg { background: blue; } .item:nth-child(2) ~ .bg { background: darkblue; } .item:nth-child(3) ~ .bg { background: red; } .item:nth-child(4) ~ .bg { background: darkgreen; } .item:nth-child(5) ~ .bg { background: darkorange; }

 <table> <tr> <td> <div class="item">1</div> <div class="bg"></div> </td> <td> <div class="item">1</div> <div class="item">2</div> <div class="bg"></div> </td> </tr> <tr> <td> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="bg"></div> </td> <td> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="bg"></div> </td> </tr> <tr> <td colspan="2"> <span class="item">1</span> <span class="item">2</span> <strong class="item">3</strong> <i class="item">4</i> <div class="item">5</div> <div class="bg"></div> </td> </tr> </table>