Play Keepaway: 9月 2009

xmlによるDOM操作をもうちょっと勉強してみた。

繰り返しとかeachでできるようになったけど、
子要素とか難しい。
childとか。

でも、だいたいできるようになった気がする。

ポイントは、dataTypeとか指定しないことかなぁー

　→　指定はずしたら、うまく動くようになった。。。

XMLソース

view plain print ?

<address_database>
<address recordid="1" zipcode="6900015" kanjiaddress="島根県松江市秋鹿町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｱｲｶﾁｮｳ">
<address recordid="2" zipcode="6900834" kanjiaddress="島根県松江市青葉台" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｱｵﾊﾞﾀﾞｲ">
<address recordid="3" zipcode="6900003" kanjiaddress="島根県松江市上乃木" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｱｹﾞﾉｷﾞ">
<address recordid="4" zipcode="6900027" kanjiaddress="島根県松江市朝酌町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｱｻｸﾐﾁｮｳ">
<address recordid="5" zipcode="6900881" kanjiaddress="島根県松江市朝日町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｱｻﾋﾏﾁ">
<address recordid="6" zipcode="6900006" kanjiaddress="島根県松江市意宇町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｲｳﾁｮｳ">
<address recordid="7" zipcode="6900034" kanjiaddress="島根県松江市石橋町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｲｼﾊﾞｼﾁｮｳ">
<address recordid="8" zipcode="6900062" kanjiaddress="島根県松江市伊勢宮町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｲｾﾐﾔﾁｮｳ">
<address recordid="9" zipcode="6900869" kanjiaddress="島根県松江市一の谷町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｲﾁﾉﾀﾆﾁｮｳ">
<address recordid="10" zipcode="6900131" kanjiaddress="島根県松江市魚町" kanaaddress="ﾏﾈｹﾝﾏﾂｴｼｳｵﾏﾁ">
</address></address></address></address></address></address></address></address></address></address></address_database>

HTMLソース


view plainprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<html lang="ja">  
<head>  
<title> .:: Sample Play Keepaway ::. Ajax-02</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<meta http-equiv="cache-control" content="no-cache">  
<meta name="Author" content="Sample">  
<meta http-equiv="Content-Script-Type" content="text/javascript">  
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />  
<link rel="stylesheet" href="css/default.css" type="text/css" />  
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><br /><html lang="ja"><br /><head><br /><title> .:: Sample Play Keepaway ::. Ajax-02</title><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /><meta http-equiv="cache-control" content="no-cache"><br /><meta name="Author" content="Sample"><br /><meta http-equiv="Content-Script-Type" content="text/javascript"><br /><link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" /><br /><link rel="stylesheet" href="css/default.css" type="text/css" /><br />

view plain print ?

<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: './xml/sample.xml',
cache: false,
type: 'GET',
timeout: 5000,
error: function(){
alert('xmlファイルの読み込みに失敗しました');
},
success: function(xml){
var index = 0;
$(xml).find("address").each(function(){
index++;
var zipCode = $(this).attr('zipCode');
var kanjiAddress = $(this).attr('kanjiAddress');
var kanaAddress = $(this).attr('kanaAddress');
$('<div></div>')
.html('<a href="javascript:void(0); return false;" id="' + 'res-' + index + '">' + zipCode + ',' + kanjiAddress + ',' + kanaAddress + '</a>')
.appendTo('div#result');
});
$("li.demo").html("");
$("div#result").find("a").each(function(){
$(this).click(function(){
$('#address_text').val($(this).text());
});
});
}
});
});
</script>


view plainprint?
</head>  
<body>  
  
<div class="preview">  
<input type="text" style="width: 20em;" name="address" value="" id="address_text">  
<div style="border: 1px solid silver; padding: 2px; position: absolute; z-index: 999; background-color: lightyellow;" id="result" class="result"></div>  
<ol id="samp-list">  
</ol>  
  
</div>  
  
</body>  
</html>  
<br /></head><br /><body><br /><br /><div class="preview"><br /><input type="text" style="width: 20em;" name="address" value="" id="address_text"><br /><div style="border: 1px solid silver; padding: 2px; position: absolute; z-index: 999; background-color: lightyellow;" id="result" class="result"></div><br /><ol id="samp-list"><br /></ol><br /><br /></div><br /><br /></body><br /></html><br /><br />

Play Keepaway

2009年9月10日木曜日

jqueryでDOM操作

XMLソース

HTMLソース