2017-05-15 10 views
2

5日前の場合、テーブルの要素をループして特定の要素のCSSを変更したいと思います。日付の列は、フォーマットの文字列になりますThu May 04 13:44:23 EDT 2017​​をループして日付を比較する方法jQuery

私はそれがこれらの行に沿って何かでなければなりません(簡単に言うと、日付が今日より前であるとしましょう)。行きたいものを手に入れよう。 jQueryUIライブラリが利用可能です。

$(".t-data-grid").find('td').each (function() { 
    if(Date.parse($(this).text()) < $.datepicker.formatDate('DD, d MM, yy', new Date())) { 
    $(this).css('color', 'red'); 
    } 
});  
+0

あなたは日付ピッカーを使用している場合にも、これが役立つことがあります。http://stackoverflow.com/questions/12821033/comparing-datepicker-dates-javascript – Woodrow

答えて

2

ここでは、あなたの問題を解決する非常に単純なsolutoinです。コードはコメントされており、それ自体を説明する必要があります。

$(".t-data-grid").find('td').each(function() { 
 
    // Parse the date 
 
    var date = Date.parse($(this).text()); 
 
    // Create a date to compare against 
 
    var fiveDaysAgo = new Date(); 
 
    // Subtract 5 days from it 
 
    fiveDaysAgo.setDate(fiveDaysAgo.getDate()-5); 
 
    // Compare to see if the date in the table is older than 5 days 
 
    if(date < fiveDaysAgo) $(this).css('color', 'red'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="t-data-grid"> 
 
    <tr> 
 
    <td>Mon May 15 13:44:23 EDT 2017</td> 
 
    <td>Sat May 13 13:44:23 EDT 2017</td> 
 
    <td>Wed May 10 13:44:23 EDT 2017</td> 
 
    <td>Mon May 08 13:44:23 EDT 2017</td> 
 
    <td>Sun May 07 13:44:23 EDT 2017</td> 
 
    </tr> 
 
</table>

+0

それは使用することが悪いスタイルだマルチ中括弧のないif文。 – Tomalak

+0

@Tomalak私たちはすべて私たちの好みを持っています。 –

+0

シンプルで洗練されたソリューションの両方に感謝します! –

1

このライン

if(Date.parse($(this).text()) < $.datepicker.formatDate('DD, d MM, yy', new Date())) 

は($.datepicker.formatDate()を生成するものである)文字列に(Date.parse()を生成するものである)Dateオブジェクトを比較します。これは動作しません。

日付オブジェクトと日付オブジェクトを比較します。

$(".t-data-grid td").each(function() { 
    var cellDate = Date.parse($(this).text()); 
    if (cellDate < new Date()) { 
     $(this).css('color', 'red'); 
    } 
}); 

<td> sが実際に日付と解釈できるテキストが含まれていることを確認してください。可能な日付表現のすべてがDate.parse()によって認識されるわけではありません。

JS日付から日数を減算する方法は、この質問で明確になっています:Subtract days from a date in JavaScript(他にも多数あります)。

関連する問題