JavaScriptを使って、住所カードのレコードを切り替えてみましょう。
この例では、XMLデータのみ利用しています。
HTMLのXMLタグを使って、XMLデータ(id=addr)を定義し、レコードセット(rs)を使って表示します。
レコードセットとは、データベースや表形式のデータの中の1件分のデータのことです。
JavaScriptでは、このレコードセットの位置をMoveFirst, movePrevious, moveNextなどのメソッドを使って移動させてアクセスすることができます。
表示する場合は、dataSrcとdataFldで指定します。
| chgrec.htm |
|---|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<xml id=addr src="addr.xml"></xml>
<title>JavsScriptによるレコードの切り替え方法</title>
<link rev="made" href="mailto:wmaster@ash.or.jp">
<link rel="stylesheet" type="text/css" href="addr.css">
<script type="text/javascript">
<!--
function init() {
rs=addr.recordset;
rs.MoveFirst();
}
function prev() {
rs.movePrevious();
if (rs.BOF) { rs.moveNext(); }
}
function next() {
rs.moveNext();
if (rs.EOF) { rs.movePrevious(); }
}
-->
</script>
</head>
<body onLoad="init();">
<h1>JavsScriptによるレコードの切り替え方法</h1>
<table><tr>
<th>名前</th>
<td><span dataFld="名前" dataSrc="#addr"></span></td>
</tr><tr>
<th>郵便番号</th>
<td><span dataFld="郵便番号" dataSrc="#addr"></span></td>
</tr><tr>
<th>住所</th>
<td><span dataFld="住所" dataSrc="#addr"></span></td>
</tr><tr>
<th>電話番号</th>
<td><span dataFld="電話番号" dataSrc="#addr"></span></td>
</tr></table>
<form>
<input id=btn_prev onclick=prev() type=button value=" 前のレコード ">
<input id=btn_next onclick=next() type=button value=" 次のレコード ">
</form>
</body>
</html>
|
IE5.0を使って実行してみましょう。 プッシュボタンを選択することで、次と前の住所カードのデータを表示することができます。
JavaScriptを使って、住所録の表示を切り替えてみましょう。
HTMLのXMLタグを使って、XMLデータ(id=xml)とスタイルシート(id=xsl*)を定義し、transformNodeメソッドを使って表示します。
表示は、DIVタグで指定した場所に、innerHTMLメソッドを使って出力します。
| select.htm |
|---|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<xml id="xml" src="addr.xml"></xml>
<xml id="xslList" src="addr.xsl"></xml>
<xml id="xslCard" src="addrcard.xsl"></xml>
<title>JavsScriptによるスタイルシートの切り替え方法</title>
<link rev="made" href="mailto:wmaster@ash.or.jp">
<link rel="stylesheet" type="text/css" href="addr.css">
<script language="javascript">
<!--
function chgList() {
dsp.innerHTML = xml.transformNode(xslList.documentElement);
}
function chgCard() {
dsp.innerHTML = xml.transformNode(xslCard.documentElement);
}
-->
</script>
</head>
<body onLoad="chgList()">
<div id="dsp"></div>
<form>
<input id="btnList" onclick="chgList()" type="button" value=" リスト形式（帳票） ">
<input id="btnCard" onclick="chgCard()" type="button" value=" カード形式（単票） ">
</form>
</body>
</html>
|
IE5.0を使って実行してみましょう。 プッシュボタンを選択することで、住所録の表示形式を、リスト形式の帳票かカード形式の単票を選択することができます。