ＸＭＬ表示を２段階で…

締切済

質問者：sampo3
質問日時：2007/06/25 21:24
回答数：1件

今年から勉強を始めた者です。質問させてください。

■list.xml
<list>
<東京>
<name>太郎</name>
<place>渋谷区</place>
<img>tarou.jpg</img>
<info>優しい</info>
</東京>
<東京>
<name>次郎</name>
<place>墨田区</place>
<img>zirou.jpg</img>
<info>江戸っ子</info>
</東京>
<大阪>
<name>三郎</name>
<place>岸和田市</place>
<img>saburou.jpg</img>
<info>怒りっぽい</info>
</大阪>
</list>

■htmlの表示
div Ａ
[全国][東京][大阪]
div Ｂ
太郎渋谷区 [詳細]
次郎墨田区 [詳細]
三郎岸和田市 [詳細]
div Ｃ
[写真] 性格：優しい

divＡにてxslを切り替え、divＢに<name>と<place>を反映。
さらに反映されたdivＢの[詳細]をクリックすると、対応した<img>と<info>がdivＣに反映するというのを作りたいのですが…。
（上の状態は、divＡにて[全国]をクリック、反映されたdivＢにて「太郎」の[詳細]をクリックしたときの表示例）

どうしても、div Ｃに反映させる方法が分かりません。

どなたか力をお貸しください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： trfnc223
回答日時：2007/06/29 18:11

抽象的すぎてよくわかりませんが、

AからBへの絞り込みができるのであれば、
同様にBからcへの絞り込みは同じようにできるのではないのですか？
具体的にコードをのせていただいた方が、答えやすいですが。

この回答への補足

スイマセン。コードを書きます。
（1段階のみのコードです）
INPUTを押して、どうにかしようと思っていたんですが、何か根本的に間違えているような気もしています。

■js.xml
function tramsformlists(xmlFile, xslFile, resultNodeID){
var xml, xslt, newDoc;
if(document.all){
xml = new ActiveXObject("Microsoft.XMLDOM");
xslt = new ActiveXObject("Microsoft.XMLDOM");
}
else {
xml = document.implementation.createDocument("", "", null);
xslt = document.implementation.createDocument("", "", null);
}
xml.async = false;
xslt.async = false;
xml.load(xmlFile);
xslt.load(xslFile);
if(document.all){
document.getElementById(resultNodeID).innerHTML = xml.transformNode(xslt);
}
else {
var xsltp = new XSLTProcessor();
xsltp.importStylesheet(xslt);
newDoc = xsltp.transformToFragment(xml, window.document);
document.getElementById('ShowXML').innerHTML = "";
document.getElementById('ShowXML').appendChild(newDoc);
}
}

■zenkoku.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="list">
<xsl:apply-templates select="東京"/>
<xsl:apply-templates select="大阪"/>
</xsl:template>
<xsl:template match="東京">
<div>
<xsl:value-of select="name"/>
<xsl:value-of select="day"/>
<xsl:value-of select="place"/>
<INPUT type="button" value="詳細"/>
</div>
</xsl:template>
<xsl:template match="大阪">
<div>
<xsl:value-of select="name"/>
<xsl:value-of select="day"/>
<xsl:value-of select="place"/>
<INPUT type="button" value="詳細"/>
</div>
</xsl:template>
</xsl:stylesheet>

■tokyo.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="list">
<xsl:apply-templates select="東京"/>
</xsl:template>
<xsl:template match="東京">
<div>
<xsl:value-of select="name"/>
<xsl:value-of select="day"/>
<xsl:value-of select="place"/>
<INPUT type="button" value="詳細"/>
</div>
</xsl:template>
</xsl:stylesheet>

■osaka.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="list">
<xsl:apply-templates select="大阪"/>
</xsl:template>
<xsl:template match="大阪">
<div>
<xsl:value-of select="./name"/>
<xsl:value-of select="./day"/>
<xsl:value-of select="./place"/>
<INPUT type="button" value="詳細"/>
</div>
</xsl:template>
</xsl:stylesheet>

■list.html
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js.js"></script>
<title>リスト</title>
</head>
<body onload="tramsformlists('list.xml', 'zenkoku.xsl', 'ShowXML')">
<div>
<span onclick="tramsformlists('list.xml', 'zenkoku.xsl', 'ShowXML')">全国</span>
<span onclick="tramsformlists('list.xml', 'tokyo.xsl', 'ShowXML')">東京</span>
<span onclick="tramsformlists('list.xml', 'osaka.xsl', 'ShowXML')">大阪</span>
</div>
<div id="ShowXML"></div>
<div>詳細をクリックしたら対応したimgとinfoをこのdiv領域に表示したい</div>
</body>
</html>