<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.1.0 for Windows">
<title>テーブル表示の実験</title>
<style>
table {
text-align: left;
font-size: 12px;
font-family: verdana;
background: #c0c0c0;
}
table thead {
cursor: pointer;
}
table thead tr {
background: #c0c0c0;
}
table tbody tr {
background: #f0f0f0;
}
td, th {
border: 1px solid white;
}
</style>
<SCRIPT src="prototype.js" type="text/JavaScript"></SCRIPT>
<script src="webtoolkit.scrollabletable.js" type="text/JavaScript"></script>
<script type="text/javascript">
<!--
function loadText(){
new Ajax.Request("http://10.133.57.82:8080/book/getXML",
{ method: 'get', onComplete: displayData });
}
function displayData(httpObj){
var xmlDoc = httpObj.responseXML;
var rowObj = xmlDoc.getElementsByTagName("Row");
var columnObj = rowObj[0].childNodes;
stringHTML = "<table id=\"Table1\" ><thead><tr>";
var tbody = [];
for (var i=0; i<columnObj.length; i++) {
// 表のタイトル行を出力する
stringHTML += "<th>" + columnObj[i].nodeName + "</th>";
// 内容を配列に出力する
tbody[i] = xmlDoc.getElementsByTagName(columnObj[i].nodeName);
}
stringHTML += "</tr></thead><tbody><tr>";
for (var j=0; j<tbody[0].length; j++) { // tbody[1] でもいっしょ
stringHTML += "<tr>";
for (var i=0; i<columnObj.length; i++) {
stringHTML += "<td>" + tbody[i][j].firstChild.nodeValue + "</td>";
}
stringHTML += "</tr>";
}
stringHTML += "</tbody></table>";
$(disp).innerHTML = stringHTML;
var t = new ScrollableTable(document.getElementById('Table1'), 100,900);
}
-->
</script>
</HEAD>
<BODY>
<form>
<input type="button" value="サーバからXML取得" onClick="loadText()">
</form>
<div id="disp"></div>
</BODY>
</HTML>