WebDesigning 5月号掲載のサンプルです。マイクロソフトエクセルのXMLデータをページ上にテーブルとして表示するものです。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>ExcelのXMLデータを表示する</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="Lib_Excel.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
new Ajax.Request("menu.xml", { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var sheetName = "Sheet1";
var XML = httpObj.responseXML;
var resultData = "";
var wsObj = getWorkSheet(XML, sheetName);
var w = getWorkSheetColCount(wsObj);
var h = getWorkSheetRowCount(wsObj);
resultData += "<table border='1'>";
for (i=0; i<h; i++)
{
resultData += "<tr>";
for (j=0; j<w; j++)
{
var n = getCellData(XML,sheetName,j,i);
resultData += "<td>"+n +"</td>";
}
resultData += "</tr>";
}
resultData += "</table>";
$("result").innerHTML = resultData;
}
// --></script>
</head>
<body>
<h1>ExcelのXMLデータを表示する</h1>
<div id="result"></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ExcelのXMLデータを表示する(+CSS)</title>
<style type="text/css"><!--
table {
border-collapse:collapse;
}
tr,td {
margin:0px;
padding:0px 10px 0px 10px;
border:2px solid black;
}
.itemListStyle {
font-size:11pt;
color:#223;
background-color:#fefe80;
visibility:hidden;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="Lib_Excel.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
new Ajax.Request("menu.xml", { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var listTableObj = document.getElementById("menuList");
var listItemObj = document.getElementById("itemList");
var sheetName = "Sheet1";
var XML = httpObj.responseXML;
var wsObj = getWorkSheet(XML, sheetName);
var h = getWorkSheetRowCount(wsObj);
for (i=0; i<h; i++) // 縦の行数分繰り返す
{
var trObj = listItemObj.cloneNode(true); // tableのtrタグで囲まれた一行を子ノードごと複製する
trObj.id = "itemList"+i;
trObj.style.visibility = "visible";
var tdObj = trObj.getElementsByTagName("td");
tdObj[0].innerHTML = getCellData(XML,sheetName,0,i); // 商品名
tdObj[1].innerHTML = getCellData(XML,sheetName,1,i); // 価格
listTableObj.appendChild(trObj); // テーブルの一番最後に連結
}
}
// --></script>
</head>
<body>
<h1>ExcelのXMLデータを表示する(+CSS)</h1>
<table>
<tbody id="menuList">
<tr id="itemList" class="itemListStyle"><td></td><td></td></tr>
</tbody>
</table>
</body>
</html>
【Lib_Excel.js】
// --------------------------------------------------------------------------------------
// Microsoft Word 2003 (Windows) XML Library
// --------------------------------------------------------------------------------------<
// get Worksheet Tag
function getWorkSheet(xml,sheetName)
{
var tagObj = xml.getElementsByTagName("Worksheet");
for (var i=0; i<tagObj.length; i++)
{
var n = tagObj[i].attributes[0].value;
if (n == sheetName) return tagObj[i];
}
return null;
}
// get Worksheet Row Size(height)
function getWorkSheetRowCount(tagObj)
{
var tableObj = tagObj.getElementsByTagName("Table")[0];
return tableObj.getElementsByTagName("Row").length;
}
// get Worksheet Col Size(width)
function getWorkSheetColCount(tagObj)
{
var tableObj = tagObj.getElementsByTagName("Table")[0];
var rowObj = tagObj.getElementsByTagName("Row")[0];
return rowObj.getElementsByTagName("Cell").length;
}
// get Cell Data
function getCellData(xml,sheetName,xPos,yPos)
{
var wsObj = getWorkSheet(xml,sheetName);
if (!wsObj) return null;
var wSize = getWorkSheetColCount(wsObj);
var hSize = getWorkSheetRowCount(wsObj);
if ((xPos < 0) || (xPos >wSize) || (yPos < 0) || (yPos > hSize)) return null;
var tableObj = wsObj.getElementsByTagName("Table")[0];
var rowObj = tableObj.getElementsByTagName("Row")[yPos];
var cellObj = rowObj.getElementsByTagName("Cell")[xPos];
return cellObj.getElementsByTagName("Data")[0].firstChild.nodeValue;
}