xml ファイルを読み込んで画面に表示させようと思いました。
今回は html と javascript を分けています。
■ test.xml (読み込む xml ファイル)
<?xml version="1.0" encoding="UTF-8"?>
<test_list>
<test_data>
<id>1</id>
<name>徳川家康</name>
<text>初代</text>
</test_data>
<test_data>
<id>2</id>
<name>徳川秀忠</name>
<text>二代目</text>
</test_data>
<test_data>
<id>3</id>
<name>徳川家光</name>
<text>三代目</text>
</test_data>
</test_list>
■ test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="test.js"></script>
<title>タイトル</title>
</head>
<body>
<table>
<thead>
<tr>
<th>名前</th>
<th>備考</th>
</tr>
</thead>
<tbody id="data_list">
</tbody>
</table>
</body>
</html>
■ test.js
$(function(){
$.ajax({
url : 'test.xml'
, type : 'get'
, dataType : 'xml'
, cache : false
, success : function(data) {
var count = 0 ;
$(data).find("test_list").find("test_data").each(function(){
$("#data_list").append("<tr id=\"data_id" + count + "\" class=\"ins_data\"></tr>") ;
$("#data_list #data_id" + count).html(
"<td>" + $(this).find("name").text() + "</td>"
+ "<td>" + $(this).find("text").text() + "</td>"
) ;
count++ ;
}) ;
}
, error : function() {
alert("無いよ") ;
}
});
})
