根据一天中的时间更改哪个表格行背景颜色答案

【问题标题】：Change Which Table Row Background Color Based on Time of Day根据一天中的时间更改哪个表格行背景颜色
【发布时间】：2017-10-21 16:43:07
【问题描述】：

我尝试将这段代码调整为数小时和数分钟。但我在某个地方错了。请告诉我在哪里好吗？

checkUpdateColors = function() {
 var d = new Date();
 var hourCompare = d.getHours();
 var minsCompare = d.getMinutes();

if ((hourCompare = 7 && minsCompare >= 30) | (hourCompare = 8 minsCompare < 10)) {
    $('#r1').css("background-color", "ceeca5");
if (hourCompare = 11 && minsCompare >= 0 && minsCompare < 40) {
    $('#r9').css("background-color", "blue"); 

} else {
    $('#r1').css("background-color", "blue");
    $('#r2').css("background-color", "red");
}
}();

setInterval(function() {
   checkUpdateColors();  
}, 3000);

这是整个代码：

<style>
table, th, td {
    color: black;
    background-color: white;
    text-align: center;
    border: 2px solid black;
    border-collapse: collapse;
    font-size: 16px;
    margin: auto;
    padding: 5px;
}
td:nth-child(1) {
    width: 20px;
}
td:nth-child(2) {
    width: 160px;
}
</style>

<script type="text/javascript">
checkUpdateColors = function() {
 var d = new Date();
 var hourCompare = d.getHours();
 var minsCompare = d.getMinutes();

if ((hourCompare = 7 && minsCompare >= 30) | (hourCompare = 8 minsCompare < 10)) {
    $('#r1').css("background-color", "ceeca5");
if (hourCompare = 11 && minsCompare >= 0 && minsCompare < 40) {
    $('#r9').css("background-color", "blue"); 

} else {
    $('#r1').css("background-color", "blue");
    $('#r2').css("background-color", "red");
}
}();

setInterval(function() {
   checkUpdateColors();  
}, 3000);
</script>

<div class="table">
<table class="schedule">
 <tr>  <th width="200" colspan="2">I СМЯНА</th> </tr>
 <tr>  <td id="r1">1</td><td>7:30 - 8:10</td> </tr>
 <tr>  <td id="r2" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r3">2</td><td>8:20 - 9:00</td> </tr>
 <tr>  <td id="r4" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r5">3</td><td>9:20 - 10:00</td> </tr>
 <tr>  <td id="r6" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r7">4</td><td>10:10 - 10:50</td> </tr>
 <tr>  <td id="r8" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r9">5</td><td>11:00 - 11:40</td> </tr>
 <tr>  <td id="r10" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r11">6</td><td>11:50 - 12:30</td> </tr>
 <tr>  <td id="r12" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r13">7</td><td>12:40 - 13:20</td> </tr>
 <tr>  <td id="r14" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r15">8</td><td>1:15 - 2:01</td> </tr>
</table>
</div>

我上传了代码：http://jsfiddle.net/6h7u434j/。

【问题讨论】：

你的html在哪里？并尝试将您的代码粘贴到 sn-p 中。
我知道我错过了头部和身体标签，感谢您的提醒。我上传了代码：jsfiddle.net/sgehkvkz

标签： javascript css html-table

【解决方案1】：

试试这个java脚本代码：

<script type="text/javascript">
    function checkUpdateColors() {
         var d = new Date();
         var hourCompare = d.getHours();
         var minsCompare = d.getMinutes();

        if ((hourCompare == 7 && minsCompare >= 30) || (hourCompare == 8 && minsCompare < 10)) {
            $('#r1').css("background-color", "ceeca5");

            if (hourCompare = 11 && minsCompare >= 0 && minsCompare < 40) {
                $('#r9').css("background-color", "blue"); 

            } 
            else {
                $('#r1').css("background-color", "blue");
                $('#r2').css("background-color", "red");
            }
        }
    }

    setInterval(function() { checkUpdateColors(); }, 3000);
    </script>

【讨论】：

jsfiddle.net/sgehkvkz 非常感谢 Shital Marakana！你的代码有效，但后来我可能犯了一个错误，它没有工作。