td 背景色基于内容答案

【问题标题】：td background-color based on contenttd 背景色基于内容
【发布时间】：2020-12-25 21:53:18
【问题描述】：

我正在尝试制作一个天气表，它根据单元格中的数字（温度）更改表格单元格的背景。我在单独的文件中使用 HTML、CSS 和 js。我不确定出了什么问题，但我猜是 js。

这是我所拥有的：

HTML：

<table border="1px">
    <tr id="temp">
        <td>0</td>
        <td>40</td>
        <td>60</td>
        <td>110</td>
    </tr>

JS：

$('#temp td').each(function() {
if(parseInt($(this).html())<40){
    $(this).addClass("NegThirty");
}
else if(parseInt($(this).html())<110){
    $(this).addClass("Forty");
}
else if(parseInt($(this).html())>=110){
    $(this).addClass("OneTen");
}
});

CSS：

.NegThirty{
background-color: #2b2bff;
color: white;}
.Forty{
background-color: #ffffff;
color: black;}
.OneTen{
background-color: #e30000;
color: white;

对出了什么问题有任何想法吗？谢谢！

【问题讨论】：

你遇到了什么错误？
对我来说它正在工作。你引用过jquery吗？
我没有收到错误消息，背景颜色没有改变。整张桌子保持白色。我没有引用 jquery，我只在中将它链接到我的 .js 文件： - 错了吗？谢谢！

标签： javascript html-table colors background

【解决方案1】：

仔细选择你的颜色！

$('#temp td').each(function() {

if(parseInt($(this).html())<40){
    $(this).addClass("NegThirty");
}
else if(parseInt($(this).html())<110){
    $(this).addClass("Forty");
}
else if(parseInt($(this).html())>=110){
    $(this).addClass("OneTen");
}
});

.NegThirty{
background-color: blue;
color: white;}
.Forty{
background-color: green;
color: white;}
.OneTen{
background-color: purple;
color: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1px">
    <tr id="temp">
        <td>0</td>
        <td>40</td>
        <td>60</td>
        <td>110</td>
    </tr>

【讨论】：