Question

我有一张桌子，其功能是让细胞变红或变绿，具体取决于细胞的日期。

现在，当我将日期测试设置为24-09-2017时，所有单元格都会变为红色，正如代码中所预期的那样。当我将其更改为26-07-2017时，它会变为绿色，这也是预期的。现在我想这样做，只有一个单元格在过去有一个日期，其余的在将来。我如何制作我的代码，它就是这样做的？

这是我的代码：

＆＃13;

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);

});

＆＃13;

td {
  padding: 20px;
}

＆＃13;

<!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>

＆＃13;

Answer 1

也许你想要这样的东西：

＆＃13;

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);

});

＆＃13;

td {
  padding: 20px;
}

＆＃13;

<!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>

＆＃13;

使javascript打印不同的东西

1 个答案: