感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryで手元のHTMLを読み込んで表示するサンプル。

スポンサーリンク

Ajaxとは

AjaxとはAsynchronous JavaScript+XMLの略で、ページを移動せずにWebサーバと通信を行い、表示内容を書き換えていく仕組みのこと。

jQueryを使って、手元にあるHTMLファイルを読み込んでみる

・ボタンクリックで、手元のHTMLを読み込んで表示するサンプル。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> HTMLを読み込んでみる </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
	$("#button").click(function() {
		$("#temoto").load("temoto.html");
	});
});
</script>
</head>
<body>
<h1>AjaxでHTMLを読み込んでみる</h1>
<p>ボタンクリックでローカルのHTMLを読み込みます</p></br>
<button id="button">手元のHTMLを表示</button>
<div id="temoto"></div>

</body>
</html

読み込んでいる手元のHTMLはこんな感じ。

<!DOCTYPE html>
<html>
<head>
	<title>TEST</title>
</head>
<body>
<table border="1">
<tr><th>日付</th><th>終値</th></tr>
<tr><td>2013/06/18</td><td>13677.32</td></tr>
<tr><td>2013/06/17</td><td>13213.55</td></tr>
<!--略 -->
<tr><td>2013/06/01</td><td>13014.87</td></tr>
</table>
</body>
</html>

jQueryを使って、手元のHTMLの特定のIDに紐付いた値を取得する

selectで選んだ日の値を取得する。
var dayに選んだ値をつっこんで、リクエスト時に一緒に値を送信する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> HTMLを読み込んでみる </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
	$("#button").click(function() {
		var day = $("select").attr("value");
		console.log(day);
		$("#temoto").load("temoto2.html tr[id*="+day+"]");
	});
});
</script>
</head>
<body>
<h1>Ajaxで特定のIDだけ、HTMLを読み込んで表示してみる</h1>
<p>ボタンクリックでローカルのHTMLを読み込みます</p></br>
いつがいいか選んでください:<select>
    <option value="2013/06/18">2013/06/18</option>
    <option value="2013/06/17">2013/06/17</option>
    <!-- 略 -->
    <option value="2013/06/02">2013/06/02</option>
    <option value="2013/06/01">2013/06/01</option>
</select>
<button id="button">手元のHTMLを表示</button>
<div id="temoto"></div>
</body>
</html>

読み込んだHTMLは以下の通り、idで紐付いている。

<!DOCTYPE html>
<html>
<head>
	<title>TEST</title>
</head>
<body>
<table border="1">
<tr><th>日付</th><th>終値</th></tr>
<tr id="2013/06/18"><td>2013/06/18</td><td>13677.32</td></tr>
<tr id="2013/06/17"><td>2013/06/17</td><td>13213.55</td></tr>
<!-- 略 -->
<tr id="2013/06/02"><td>2013/06/02</td><td>12904.02</td></tr>
<tr id="2013/06/01"><td>2013/06/01</td><td>13014.87</td></tr>
</table>
</body>
</html>

参考文献

jQuery ポケットリファレンス (POCKET REFERENCE)

jQuery ポケットリファレンス (POCKET REFERENCE)

感謝のプログラミング

今回で感謝のプログラミングは【485時間目】
10000時間まで、あと【9515時間】

別件でハマっていたため、余計に時間がかかってしまった。。