使JavaScript打印不同的东西

我有一张表，其功能是使单元格红色或绿色，取决于单元格的日期。使JavaScript打印不同的东西

现在，当我将datetest设置为24-09-2017时，所有单元格变为红色，如代码中所示。当我将其更改为26-07-2017时，它将变为绿色，这与预期相同。现在我想这样做，只有一个单元过去有一个约会，其余的都是未来。我怎样才能让我的代码如此，它就是这样做的？

这里是我的代码：

var datetest = '22-9-2017'; 
 
alert("Welcome") 
 
var d = new Date(); 
 

 
var month = d.getMonth() + 1; 
 
var day = d.getDate(); 
 

 
var output = (day < 10 ? '0' : '') + day + '-' + 
 
    (day < 10 ? '0' : '') + month + '-' + 
 
    d.getFullYear(); 
 

 
$(document).ready(function() { 
 
    if (datetest < output) { 
 
    $('.test1').css("background-color", "red"); 
 
    $('.test2').css("background-color", "red"); 
 
    $('.test3').css("background-color", "red"); 
 
    $('.test4').css("background-color", "red"); 
 
    $('.test5').css("background-color", "red"); 
 
    } else { 
 
    $('.test1').css("background-color", "green"); 
 
    $('.test2').css("background-color", "green"); 
 
    $('.test3').css("background-color", "green"); 
 
    $('.test4').css("background-color", "green"); 
 
    $('.test5').css("background-color", "green"); 
 

 
    } 
 
    $('.test1').text(output); 
 
    $('.test2').text(output); 
 
    $('.test3').text(output); 
 
    $('.test4').text(output); 
 
    $('.test5').text(output); 
 

 
});

td { 
 
    padding: 20px; 
 
}

<!DOCTYPE HTML> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
 
    </script> 
 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
</head> 
 
<table> 
 
    <tr> 
 
    <th>werkvoorbereiding</th> 
 
    <th>Ordervrijgave productie</th> 
 
    <th>Buigen</th> 
 
    <th>Zagen</th> 
 
    <th>Metaal</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="test1">1</td> 
 
    <td class="test2">2</td> 
 
    <td class="test3">3</td> 
 
    <td class="test4">4</td> 
 
    <td class="test5">5</td> 
 

 

 
    </tr> 
 
</table> 
 

 
</html>

来源

2017-09-25 gnunix

你可以更准确？你有2 **输出**，不是吗？ –

我想使用单独的单元格的单独日期，现在每个单元格都有相同的日期，所以当我更改datetest时它们都会更改。 – gnunix

不要将日期与字符串值进行比较，这会导致''26-8-2016“'大于'”22-9-2017“'，请参见[this question]（https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript）关于如何比较日期 –

也许你想是这样的：

var datetest1 = '20-9-2017'; 
 
var datetest2 = '29-9-2017'; 
 
alert("Welcome") 
 
var d = new Date(); 
 

 
var month = d.getMonth() + 1; 
 
var day = d.getDate(); 
 

 
var output = (day < 10 ? '0' : '') + day + '-' + 
 
    (day < 10 ? '0' : '') + month + '-' + 
 
    d.getFullYear(); 
 

 
$(document).ready(function() { 
 
    if (datetest1 < output) { 
 
    $('.test1').css("background-color", "red"); 
 
    $('.test2').css("background-color", "red"); 
 
    $('.test3').css("background-color", "red"); 
 
    } else { 
 
    $('.test1').css("background-color", "green"); 
 
    $('.test2').css("background-color", "green"); 
 
    $('.test3').css("background-color", "green"); 
 

 
    } 
 
    if (datetest2 < output) { 
 
    $('.test4').css("background-color", "red"); 
 
    $('.test5').css("background-color", "red"); 
 
    } else { 
 
    $('.test4').css("background-color", "green"); 
 
    $('.test5').css("background-color", "green"); 
 

 
    } 
 
    $('.test1').text(output); 
 
    $('.test2').text(output); 
 
    $('.test3').text(output); 
 
    $('.test4').text(datetest1); 
 
    $('.test5').text(datetest2); 
 

 
});

td { 
 
    padding: 20px; 
 
}

<!DOCTYPE HTML> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
 
    </script> 
 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
</head> 
 
<table> 
 
    <tr> 
 
    <th>werkvoorbereiding</th> 
 
    <th>Ordervrijgave productie</th> 
 
    <th>Buigen</th> 
 
    <th>Zagen</th> 
 
    <th>Metaal</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="test1">1</td> 
 
    <td class="test2">2</td> 
 
    <td class="test3">3</td> 
 
    <td class="test4">4</td> 
 
    <td class="test5">5</td> 
 

 

 
    </tr> 
 
</table> 
 

 
</html>

来源

2017-09-25 09:12:13

使JavaScript打印不同的东西

回答

相关问题