Spryではデータを表示する場合にテーブルを利用して表示することが多くなります。基本的にテーブルタグを利用した場合でもdiv、spanタグと同じような表記を利用することができます以下のサンプルはXMLデータをテーブルで表示するものです。divタグで処理範囲を指定し、その中にテーブルタグを記述します。（サンプルを
実行する）
【XMLファイル：fruits.xml】
<?xml version="1.0" encoding="utf-8"?>
<list>
<fruits><name>リンゴ</name><price>100</price></fruits>
<fruits><name>ミカン</name><price>200</price></fruits>
<fruits><name>メロン</name><price>300</price></fruits>
<fruits><name>イチゴ</name><price>250</price></fruits>
<fruits><name>レモン</name><price>150</price></fruits>
<fruits><name>トマト</name><price>110</price></fruits>
</list>
【HTMLファイル】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"><td>{myDatabase::name}</td><td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>
テーブルの横にシリアル番号を表示させたい場合には{ds_RowNumber}を使います。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>No.</th><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase">
<td align="right">
{ds_RowNumber}</td>
<td>{myDatabase::name}</td>
<td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>
しかし、{ds_RowNumber}は値が0から始まってしまうため1番から表示させたい場合には{ds_RowNumberPlus1}を使う必要があります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>No.</th><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase">
<td align="right">
{ds_RowNumberPlus1}</td>
<td>{myDatabase::name}</td>
<td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>
XMLデータを表示する際にテーブルの行ごとに色を変えたい場合があります。この場合は奇数と偶数の行で表示するスタイルシートを定義します。偶数行の場合はevenクラス、奇数行の場合はoddクラスにスタイルシートを定義します。あとはtrタグのclass属性に{ds_RowNumber}または{ds_RowNumberPlus1}を指定すると色が行ごとに交互に切り替わります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルタグでデータを表示する</title>
<style type="text/css"><!--
.even { background-color:#eee; }
.odd { background-color:#ccf; }
--></style>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<table border="1" cellspacing="0">
<tr><th>No.</th><th>名称</th><th>価格</th></tr>
<tr spry:repeat="myDatabase"
class="{ds_EvenOddRow}">
<td align="right">{ds_RowNumberPlus1}</td>
<td>{myDatabase::name}</td>
<td>{myDatabase::price}円</td>
</tr>
</table>
</div>
</body>
</html>
[
目次へ]
(2006.7.29)