JavaScriptでHTML内に記入されている日付を判定して画像を表

質問

JavaScriptでHTML内に記入されている日付を判定して画像を表示させることはできますでしょうか？
例えばこんなソースがあったとします。

<table style="width: 66%">
<tr>
<td style="style1"></td>
<td style="style2">2010/11/1</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="style1"></td>
<td style="style2">2010/09/09</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="style1"></td>
<td style="style2">2010/01/01</td>
<td>&nbsp;</td>
</tr>
</table>
テーブルの行の中に今日の日付から７日以内だった場合、該当行の<td style="style1"></td>に「NEW!」っていう画像を入れてあげたいのですがそういうのは可能でしょうか？

回答No.1

665 · ベストアンサー

各tr要素について、2つめのtd要素の日付を正規表現で取得してDateオブジェクトに変換し、それが指定した日数の範囲内であれば1つめのtd要素に画像のHTMLを挿入するという方法はどうでしょう。
以下、table要素にid属性として"sample"を指定しておいた場合（「<table id="sample" ...>」のように）のサンプルコードです。

(function(){
var new_icon = '<img src="new.gif" alt="new">'; // 挿入するHTML
var newdata = 7; // 画像を表示する日数
var rows = document.getElementById("sample").getElementsByTagName("tr");
var cells;
var matched;
var rows_count, i;
var base = new Date();

base = new Date(base.getFullYear(), base.getMonth(), base.getDate()) - newdata * 86400000;
for (rows_count = rows.length, i = 0; i < rows_count; i++) {
cells = rows[i].getElementsByTagName("td");
matched = cells[1].innerHTML.match(/(\d+)\/(\d+)\/(\d+)/);
if (matched && new Date(Number(matched[1]), Number(matched[2]) - 1, Number(matched[3])) >= base) {
cells[0].innerHTML = new_icon;
}
}
})();

script要素に直接記述する場合も外部jsファイルで呼び出す場合も、script要素はtable要素よりも後に記述する必要があります。

お礼

大変参考になりました。
ありがとうございます