时间戳

首页 > 解决方案 > 如何根据显示的值悬挂行的背景颜色？

html - 如何根据显示的值悬挂行的背景颜色？

问题描述

我需要根据显示的值更改整个表格行的背景颜色。如果值notas

我只需要使用 CSS 来完成。我尝试的所有解决方案都会删除显示的信息。

<table class="wp-table" id="posts">
    <tr> 
        <th>ID</th>
        <th>Nota Original </th>
        <th>Nota Redondeada</th>
    </tr>  
</table>
<script>
    const notas = [38,43,99,97,29,29,0, 100,40,41,42,43, 44,45,37,39, ];
    const notasid = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

    let notasr = notas.map((num) => {
        const remainder = num % 5;
        if (num< 38) {   
            return num;
        } else if (remainder >= 3) {
            num+=5-remainder
        };
        return num;
    })

    var t = "";
    for (var i = 0; i < notas.length; i++){
        var tr = "<tr>";
        tr += "<td>"+notasid[i]+"</td>";
        tr += "<td>"+notas[i]+"</td>";
        tr += "<td>"+notasr[i]+"</td>";
        tr += "</tr>";
        t += tr;
    }
    document.getElementById("posts").innerHTML += t;
</script>

标签： htmlcss

解决方案

在这种情况下，为所有 < 38 的项目添加红色类并通过 CSS 将它们变为红色将是更多问题。您不能通过 CSS 覆盖值范围。

推荐阅读