| ポイント |
<![CDATA[
function getData()
{
y = 2; // 読み出すセルの縦方向の位置（行：0から始まる）
x = 1; // 読み出すセルの横方向の位置（列：0から始まる）
txt = document.all["myTBL"].rows[y].cells[x].innerText;
alert(txt);
}
]]>
|
| 説 明 |
CSV形式のデータを表示するにはobjectタグでデータバインドを行う各種パラメータを設定します。DataURLが表示するCSV形式のファイル名、UseHeaderはヘッダー付きかどうかを指定します。ヘッダーを指定し表示するデータと関連づけをdatafld属性で行います。データバインドでページ上にデータがバインドされ表示された後（ページ構築された後）であれば、セルの位置を指定して任意のデータを読み出すことができます。行の位置はrows[参照番号]、列の位置はcols[参照番号]で指定し、読み出すデータはテキストであればinnerTextでHTMLレベルで読み出すのであればinnerHTMLで読み出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>CSV形式のデータ内の特定のデータを表示する【データバインド】</title>
<script language="JavaScript"><!--
function getData()
{
y = 2; // 読み出すセルの縦方向の位置（行：0から始まる）
x = 1; // 読み出すセルの横方向の位置（列：0から始まる）
txt = document.all["myTBL"].rows[y].cells[x].innerText;
alert(txt);
}
// --></script>
</head>
<body>
<object id="myDatabase" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="data.csv">
<param name="UseHeader" value="true">
</object>
<table datasrc="#myDatabase" id="myTBL">
<thead>
<tr><th>ID</th><th>ユーザー名</td><td>年齢</td></tr>
</thead>
<tbody>
<tr>
<td ALIGN="right"><span datafld="ID" ></span></td>
<td ALIGN="left"><span datafld="UserName"></span></td>
<td ALIGN="right"><span datafld="Age" ></span></td>
</tr>
</tbody>
</table>
<form>
<input type="button" value="2人目のユーザー名を読み出し" onClick="getData()">
</form>
</body>
</html>
]]>
|
| 補足説明 |
サンプルで使用しているCSV形式の内容は以下の通りです。
<![CDATA[
ID:INT,UserName,Age:INT
1,"Aoyagi",33
2,"Akanuma",28
3,"Kanuma",19
4,"Kurume",48
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
CSV形式のデータ内の特定のデータを表示する【データバインド】