締切済み

ＸＭＬ表示を２段階で…

2007/06/25 21:24

今年から勉強を始めた者です。質問させてください。 ■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 Ｃに反映させる方法が分かりません。どなたか力をお貸しください。

sampo3
お礼率100% (2/2)

XML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

trfnc223
ベストアンサー率60% (3/5)

2007/06/29 18:11 回答No.1

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

質問者

お礼 2007/07/09 19:11

これはもしかしたらjavascriptの質問なんですかねぇ。回答いただけないようで、他の所で聞いてみたいと思いますので、締め切らさせていただきます。ありがとうございました。

質問者

補足 2007/07/02 20:19

スイマセン。コードを書きます。（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.dtd"> <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>