Получить дату от <td>, если есть один

Существует несколько строк таблицы. Ячейка таблицы с классом » dates «может содержать дату или значение»Permanent». Если есть дата и она больше, чем сегодняшняя, она должна быть окрашена в красный цвет.

Я пытался (но не получится):

if(($(".dates").getDate() < new Date()) != -1)  {
        $(".dates").style.color = "green";
}

HTML:

<table>
  <tr>
   <td>Permanent</td>
  </tr>
  <tr>
   <td>Permanent</td>
  </tr>
  <tr>
   <td>2.05.2015</td>
  </tr>
</table>

2 ответа

  1. $(".dates").each(function(){
      
      if(new Date($(this).html()) < new Date())  {
            $(this).css("color", "green");
      }
      
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
    		<tr>
    			<td>abc</td>
    			<td class="dates">2016-10-10</td>
    			<td>abc</td>
    		</tr>
    		<tr>
    			<td>abc</td>
    			<td class="dates">2016-09-10</td>
    			<td>abc</td>
    		</tr>
    		<tr>
    			<td>abc</td>
    			<td class="dates">2016-08-10</td>
    			<td>abc</td>
    		</tr>
    		<tr>
    			<td>abc</td>
    			<td class="dates">2016-11-10</td>
    			<td>abc</td>
    		</tr>
    </table>

  2. Вам нужно будет убедиться, что вы имеете дело с правильно отформатированными датами или использовать библиотеку, такую как Moment.js. Если вы имеете дело с правильными датами, вы можете использовать new Date()для сравнения дат в ячейках с сегодняшней датой и применить некоторые CSS условно.

    $(document).ready(function(){
      $('.date').each(function(){
        if (new Date($(this).text()) > new Date()) {
          $(this).css('background-color', 'red');
        }
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <tr><td class="date">Tue Oct 04 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Mon Oct 03 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Fri Oct 07 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Mon Oct 03 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Permanent</td></tr>
      <tr><td class="date">Sat Oct 05 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Sun Oct 07 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Mon Oct 08 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Tue Oct 09 2016 01:24:37 GMT-0600 (MDT)</td></tr>
      <tr><td class="date">Permanent</td></tr>
      <tr><td class="date">Wed Oct 10 2016 01:24:37 GMT-0600 (MDT)</td></tr>
    </table>