|
■ XSLTスタイルシートを適用させる
今まではXML文書とHTML文書だけで検索結果を表示させてきましたが、
今回はXSLTスタイルシートを適用させる事で結果を整えて表示させます。
ここでは更にHTML文書にCSS文書も追加して見栄えよくします。
「createProcessingInstruction」でXML宣言を作成、
「insertBefore」により作成したDOMツリーにそれらを追加します。
そうして完成したXML文書にXSLTスタイルシートを適用させて結果表示させます。
変数名.createProcessingInstruction("xml","バージョン");
XML宣言を作成します。
変数名.insertBefore("追加するノード","追加する位置のノード");
作成したXML宣言をDOMツリーに追加します。
では、例題を取り上げてみましょう。
以下の４つのファイルをご覧下さい。XML文書を「samp09.xml」、
ＨＴＭＬ文書を「sam09.html」、
適用させるXSLTスタイルシートは「xslt09.xsl」とします。
HTML文書に読み込むスタイルシートは（CSS）「css09.css」です。
■ samp09.xml
<?xml version="1.0" encoding="shift_jis"?>
<会員>
<会員データ>
<番号>1</番号>
<氏名>伸○二郎</氏名>
<住所>東京</住所>
</会員データ>
<会員データ>
<番号>2</番号>
<氏名>伸縮○美</氏名>
<住所>大阪</住所>
</会員データ>
<会員データ>
<番号>3</番号>
<氏名>伸谷○雄</氏名>
<住所>名古屋</住所>
</会員データ>
<会員データ>
<番号>4</番号>
<氏名>伸縮和○</氏名>
<住所>東京</住所>
</会員データ>
</会員>
■ xslt09.xsl
<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="会員">
<html>
<body>
<table border="1">
<tr>
<th>番号</th>
<th>氏名</th>
<th>住所</th>
</tr>
<xsl:apply-templates select="会員データ">
<xsl:sort select="番号" data-type="number"/>
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="会員データ">
<tr>
<td><xsl:value-of select="./番号"/></td>
<td><xsl:value-of select="./氏名"/></td>
<td><xsl:value-of select="./住所"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>
■ css09.css
input {background-color:#ccccff}
table {border-width:0px;
width:400px}
th {background-color:#99cc99}
■ sam09.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>XML文書を検索 ３</title>
<link rel="stylesheet" href="css09.css" type="text/css">
<script language="JavaScript">
function Search(ky)
{
var obXML = new ActiveXObject('microsoft.XMLDOM');
obXML.async = false;
obXML.load('samp09.xml');
var Rnode = obXML.documentElement;
var hzn = new ActiveXObject('microsoft.XMLDOM');
var Rhzn = hzn.createElement("会員");
var string = "";
var tx = "";
if(Rnode.hasChildNodes())
{
for(i = 0;i <= Rnode.childNodes.length – 1;i++)
{
tx = Rnode.childNodes.item(i).childNodes.item(1).text;
if(compareString(ky.value,tx))
{
Rhzn.appendChild(Rnode.childNodes.item(i));
i = i – 1;
}
}
}
else
{
string += "データなし<br>";
hyouji.innerHTML = string;
return;
}
var sen = hzn.createProcessingInstruction("xml", 'version="1.0"');
hzn.insertBefore(sen, hzn.childNodes.item(0));
hzn.appendChild(Rhzn);
var obXSL = new ActiveXObject('microsoft.XMLDOM');
obXSL.async = false;
obXSL.load("xslt09.xsl");
hyouji.innerHTML = hzn.transformNode(obXSL);
}
function compareString(inputky,nodetext)
{
if(inputky == "")
{return false;}
if(inputky == nodetext)
{
return true;
}
else
{
var ofs = nodetext.indexOf(inputky);
if(ofs != –1)
{
return true;
}
return false;
}
}
</script>
</head>
<body>
<div align="center">
<form name="f1">
<input type="text" size="40" name="ky">
<input type="button" name="sbutton" value="検索" onClick="Search(ky)">
</form>
<hr>
<div id="hyouji" align="left"></div>
</div>
</body>
</html>
■ ＸＭＬ宣言をＤＯＭツリーへ追加
var sen = hzn.createProcessingInstruction("xml", 'version="1.0"');
hzn.insertBefore(sen, hzn.childNodes.item(0));
hzn.appendChild(Rhzn);
var obXSL = new ActiveXObject('microsoft.XMLDOM');
obXSL.async = false;
obXSL.load("xslt09.xsl");
hyouji.innerHTML = hzn.transformNode(obXSL);
「createProcessingInstruction」で作成したXML宣言を変数「sen」に格納し、
「insertBefore」によってDOMツリーの先頭へ追加しています。
「appendChild」で検索結果を追加し、以前にもやったように
XSLTスタイルシートのオブジェクトを作成、XSLT文書を読み込みます。
sam09.htmlの実行結果は以下のように表示されます。
|
