本日の日付から3日間のリンク情報をピックアップさせたくて作成してみました。リンク情報部分を同ディレクトリの他のhtmlファイルにして、読み込ませて処理させたいのですがどうしたものか分からず困っております。 VBは多少経験があるもののjavascriptは初心者でして、いろいろ至りませんが、どうぞよろしくお願い致します。サンプルページサンプル 7/22 セミナー 7/20 会議 7/19 機器入れ替え 7/19 会議 7/18 セミナー //現在日時取得 var TODAY = new Date(); var strDate = new Array(3); var afterDays; var year; var month; var day; //現在日から3日間の日付を取得しidと比較可能な形式にする for (i = 0; i < 3; i++){ afterDays = new Date(TODAY.getTime() + i *24*60*60*1000); year = afterDays.getFullYear(); month = afterDays.getMonth() + 1; day = afterDays.getDate(); if (month "); } } }

同ディレクトリのhtmlのリンクを表示させるには

解決済

質問者：sad83
質問日時：2013/07/18 10:31
回答数：2件

本日の日付から3日間のリンク情報をピックアップさせたくて作成してみました。

リンク情報部分を同ディレクトリの他のhtmlファイルにして、読み込ませて処理
させたいのですがどうしたものか分からず困っております。
VBは多少経験があるもののjavascriptは初心者でして、いろいろ至りませんが、
どうぞよろしくお願い致します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプル</h1>



<table border="0" width="560" cellpadding="2" cellspacing="0">
　<tr>
　　<td class="border" id="201307220"><a href="d.html" target="_blank">7/22 セミナー</a></td>
　</tr>
　<tr>
　　<td class="border" id="201307200"><a href="d.html" target="_blank">7/20 会議</a></td>
　</tr>
　<tr>
　　<td class="border" id="201307191"><a href="e.html" target="_blank">7/19 機器入れ替え</a></td>
　</tr>
　<tr>
　　<td class="border" id="201307190"><a href="f.html" target="_blank">7/19 会議</a></td>
　</tr>
　<tr>
　　<td class="border" id="201307180"><a href="g.html" target="_blank">7/18 セミナー</a></td>
　</tr>
</table>



<script type="text/javascript">

//現在日時取得
var TODAY = new Date();
var strDate = new Array(3);
var afterDays;
var year;
var month;
var day;

//現在日から3日間の日付を取得しidと比較可能な形式にする
for (i = 0; i < 3; i++){
afterDays = new Date(TODAY.getTime() + i *24*60*60*1000);
year = afterDays.getFullYear();
　　month = afterDays.getMonth() + 1;
　　day = afterDays.getDate();

if (month < 10) {
month = String("0" + month);
}
if (day < 10) {
day = String("0" + day);
}
strDate[i] = String(year + month + day);

}

//リンク抽出表示
for (y = 0; y < 3; y++){
for (z =0; z < 2; z++){
if (document.getElementById(strDate[y] + z) == null) {
;
}
else {
document.write(document.getElementById(strDate[y] + z).innerHTML + "<br>");
}
}
}

</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： LancerVII
回答日時：2013/07/18 13:15

こんにちは。

イメージはこんな感じでしょうか。
(JavaScriptが動かない、または動かない設定にしている場合は動作しませんので本来ならサーバ上で処理するのが望ましいです)
また、細かいことですが先頭が数字のIDは使えません。

<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jq …
<style>
div#news {
display: none;
}
</style>
<script>
$().ready ( function() {
// id="news"にdata.htmlを読み込む
$('#news').load (
'data.html',
null,
function() {
// 表示する最大日数
var maxDate = new Date(new Date().getTime()+60*60*24*2*1000);
// 取得したtdの分ループ処理
$(this).find('td').each ( function() {
// idを取得する
var id = $(this).attr('id');
// 取得したIDから日付文字列を取得
var date = id.split('-')[1];
// 日付文字列からミリ秒を生成
var targetDate = Date.parse(date.substring(0,4)+'/'+date.substring(4,6) + '/' + date.substring(6,8));
// 表示対象の日付であるかチェックし、対象外の場合は非表示とする
if ( targetDate > maxDate.getTime() || targetDate < new Date().getTime()-60*60*1000*24 ) {
$(this).css ( 'display', 'none' );
}
});
// 表示する
$('#news').show();
}
);
});
</script>
</head>
<body>
<h1>NEWS</h1>
<div id="news"></div>
</body>
</html>

==== data.html
<table border="0" width="560" cellpadding="2" cellspacing="0">
<tr>
<td class="border" id="date-20130722-0"><a href="d.html" target="_blank">7/22 セミナー</a></td>
</tr>
<tr>
<td class="border" id="date-20130721-0"><a href="d.html" target="_blank">7/21 セミナー</a></td>
</tr>
<tr>
<td class="border" id="date-20130720-0"><a href="d.html" target="_blank">7/20 会議</a></td>
</tr>
<tr>
<td class="border" id="date-20130719-1"><a href="e.html" target="_blank">7/19 機器入れ替え</a></td>
</tr>
<tr>
<td class="border" id="date-20130719-0"><a href="f.html" target="_blank">7/19 会議</a></td>
</tr>
<tr>
<td class="border" id="date-20130718-0"><a href="g.html" target="_blank">7/18 セミナー</a></td>
</tr>
<tr>
<td class="border" id="date-20130717-0"><a href="g.html" target="_blank">7/17 セミナー</a></td>
</tr>
</table>