CSSのdisplayプロパティを利用し、4つの表を切り替え表示するスクリプトです。
[サンプルXML文書を表示](下のフレームに)
XMLソース
<?xml version="1.0" encoding="Shift_JIS" ?>
<?xml-stylesheet type="text/xsl" href="script03.xsl"?>
<root>
<title>2003年11月05日の東証株式第一部情報</title>
<info><name>銘柄</name><end>終値(円)</end><total>出来高(千株)</total></info>
<data>
<kabu><name code="6752">松下</name><end>1529</end><total>12302</total></kabu>
<kabu><name code="6753">シャープ</name><end>1786</end><total>3964</total></kabu>
<kabu><name code="6758">ソニー</name><end>4030</end><total>8220</total></kabu>
<kabu><name code="6764">三洋</name><end>516</end><total>7551</total></kabu>
<kabu><name code="6501">日立</name><end>692</end><total>21896</total></kabu>
<kabu><name code="6502">東芝</name><end>440</end><total>17832</total></kabu>
<kabu><name code="6701">NEC</name><end>1027</end><total>19229</total></kabu>
<kabu><name code="6702">富士通</name><end>708</end><total>16634</total></kabu> </data>
<end>以上です(2004/8/17)</end>
</root>
XSLソース
<?xml version="1.0" encoding="Shift_Jis"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="Shift_JIS"/>
<xsl:template match="/">
<HTML>
<HEAD>
<Script language="JavaScript">
<xsl:comment>
<![CDATA[
var Elem; //押されたボタン
var oldElem = null; //1つ前に押されたボタンを格納
function Color(){
Elem = event.srcElement;
Elem.style.backgroundColor = "yellow";
if(oldElem != null && oldElem != Elem)oldElem.style.backgroundColor = "";
oldElem = Elem; //現在のボタンを1つ前のボタンとして記憶しておく
}
var oldTab = null; //1つ前に表示された表を格納
function Change(obj){
obj.style.display = "block";
if(oldTab != null && oldTab != obj)oldTab.style.display = "none";
oldTab = obj;
}
]]>
</xsl:comment>
</Script>
</HEAD>
<BODY>
<center><H3><xsl:value-of select="root/title"/></H3></center>
<table><tr>
<td><xsl:apply-templates select="root"/></td>
<td>
<button onclick="Change(tb1);Color()">コード番号を表示</button><br/><br/>
<button onclick="Change(tb2);Color()">終値を表示</button><br/><br/>
<button onclick="Change(tb3);Color()">出来高を表示</button><br/><br/>
<button onclick="Change(tb4);Color()">取引総額を表示</button>
</td>
</tr></table>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="root">
<table id="tb1" border="1" style="display:none;background-color:#d3d3d3">
<tr>
<th><xsl:value-of select="info/name"/></th>
<th><xsl:value-of select="'コード番号'"/></th>
</tr>
<xsl:for-each select="data/kabu">
<tr>
<td><xsl:value-of select="name"/></td>
<td style="text-align:right"><xsl:value-of select="name/@code"/></td>
</tr>
</xsl:for-each>
</table>
<table id="tb2" border="1" style="display:none;background-color:#afeeee">
<tr>
<th><xsl:value-of select="info/name"/></th>
<th><xsl:value-of select="info/end"/></th>
</tr>
<xsl:for-each select="data/kabu">
<tr>
<td><xsl:value-of select="name"/></td>
<td style="text-align:right"><xsl:value-of select="end"/></td>
</tr>
</xsl:for-each>
</table>
<table id="tb3" border="1" style="display:none;background-color:#f5f5dc">
<tr>
<th><xsl:value-of select="info/name"/></th>
<th><xsl:value-of select="info/total"/></th>
</tr>
<xsl:for-each select="data/kabu">
<tr>
<td><xsl:value-of select="name"/></td>
<td style="text-align:right"><xsl:value-of select="total"/></td>
</tr>
</xsl:for-each>
</table>
<table id="tb4" border="1" style="display:none;background-color:#ffb6c1">
<tr>
<th><xsl:value-of select="info/name"/></th>
<th><xsl:value-of select="'取引総額(千円)'"/></th>
</tr>
<xsl:for-each select="data/kabu">
<tr>
<td><xsl:value-of select="name"/></td>
<td style="text-align:right"><xsl:value-of select="number(end)*number(total)"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
end(04/8/17)