XSLT内容の動的変更2〜処理要素の属性値を変更

番号付け処理<xsl:number>のformat属性、ソート(並べ替え)処理 <xsl:sort>のselect属性とorder属性の値を選択切り替えできるようにした。
ポイントはgetElementsByTagName()メソッドを使い、<xsl:number>、<xsl:sort>タグの各属性をリストとして取得すること。これが取得できたら、そのtextプロパティに新しい値を代入すればよい。

[サンプルHTML文書を表示](下のフレームに)

(XMLソースは「DOMを利用して表の生成」と同じ。参照せよ)

サンプルHTMLソース

<SCRIPT language="JavaScript"><!--
var xmlobj;
var xslobj;
var str = "";
function Init(){
xmlobj=new ActiveXObject("MSXML2.DOMDocument");
xmlobj.async=false;
xmlobj.load("table01.xml");
xslobj=new ActiveXObject("MSXML2.DOMDocument");
xslobj.async=false;
xslobj.load("xslt04.xsl");
Show();
}
function Change(n){
var Formats = xslobj.getElementsByTagName("xsl:number/@format");
if(Formats.length > 0)Formats[0].text = n;

Show();
}
function Sort(s,o){
var Selects = xslobj.getElementsByTagName("xsl:sort/@select");
if(Selects.length > 0)Selects[0].text = s;
var Orders = xslobj.getElementsByTagName("xsl:sort/@order");
if(Orders.length > 0)Orders[0].text = o;

Show();
}
function Show(){
str = xmlobj.transformNode(xslobj);
dv.innerHTML = str;
}
function View(){
alert("現在のXSLTソース内容は以下の\n\n\n"+xslobj.xml);
}
//--></SCRIPT>
</HEAD>
<BODY onload="Init()">
<form name="fm"><p> ●番号の表示形式を
<select name="num">
<option value="1" selected>1,2,3・・・ </option>
<option value="01">01,02,03・・・</option>
<option value="=A=">A,B,C・・・ </option>
<option value="a">a,b,c・・・ </option>
<option value="イ">イ,ロ,ハ・・・</option>
</select>から選択し<BUTTON onclick="Change(document.fm.num.value)">変更する</BUTTON><br>
●<select name="sel">
<option value="name/@code" selected>コード番号</option>
<option value="end">終値</option>
<option value="total">出来高</option>
<option value="position()">初期状態で</option>
</select>を
<select name="ord">
<option value="ascending" selected>昇順</option>
<option value="descending">降順</option>
</select>で<BUTTON onclick="Sort(document.fm.sel.value,document.fm.ord.value)">並べ替える</BUTTON><br>・・・・・・・・・・・
<BUTTON onclick="View()">現在のXSLTソース内容を表示する</BUTTON>
</p></form>
<DIV id="dv" style="margin-left:20px;border:1px solid green">&nbsp;&nbsp;</DIV>
</BODY>

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="/">
<H4><xsl:value-of select="root/title"/></H4>
<xsl:apply-templates select="root"/>
</xsl:template>
<xsl:template match="root">
<table border="1" style="margin-left:1cm;margin-top:-4mm;border:2px solid red">
<tr style="color:blue">
<td>番号</td>
<td><xsl:value-of select="info/name"/></td>
<td>コード番号</td>
<td><xsl:value-of select="info/end"/></td>
<td><xsl:value-of select="info/total"/></td>
</tr>
<xsl:for-each select="data/kabu">
<xsl:sort select="." data-type="number" order="ascending"/>
<tr>
<td><xsl:number format="1"/></td>
<th style="color:green"><xsl:value-of select="name"/></th>
<td><xsl:value-of select="name/@code"/></td>
<td style="text-align:right"><xsl:value-of select="end"/></td>
<td style="text-align:right"><xsl:value-of select="total"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

end(04/8/18)