ソートの応用例（DOM利用）

株式情報一覧表の各見出しをクリックすれば、その見出し列を基準にソートされ、クリック毎に昇順／降順を切り替える。
JavaScriptを使いDONを操作する手順は

1)株式情報のXML文書と、それに適用するXSLTファイルを読み込み、表を作成。
2)selectSingleNode("//xsl:sort")メソッドでXSLTから<xsl:sort>ノードを取り出す。
3)そのselect属性、data-type属性、order属性にsetAttribute()メソッドで値を再設定する。
4)transformNode()メソッドを使いXSLTをXML文書に再適用する。

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

HTMLソース

<style type="text/css">
<!--
	th {color:red;cursor:default}
-->
</style>
<BASE target="rbottom">
<SCRIPT language="JavaScript"><!--
 var xmlobj,xslobj;
 var str = "";
 function init(){    <!--ページの初期状態-->
  xmlobj=new ActiveXObject("MSXML2.DOMDocument");
  xmlobj.async=false;
  xmlobj.load("../kabu1.xml");
  xslobj=new ActiveXObject("MSXML2.DOMDocument");
  xslobj.async=false;
  xslobj.load("sort07.xsl"); 
  str = xmlobj.transformNode(xslobj);
  dv.innerHTML = str;
 }
 var sele;  <!-- sort処理のselect属性 -->
 var type;  <!-- sort処理のdata-type属性 -->
 var flg = true;   <!-- sort処理で昇順／降順を切替えるフラグ変数 -->
 var flg_name = true; 
 var flg_end = true;
 var flg_total = true;
 function Change(key){
  if(key=="name"){    <!--「銘柄」がクリックされた場合 -->
    sele = "name";
    type = "text";
    flg_name = !flg_name;
    flg = flg_name;
  }else if(key=="end"){    <!--「終値」がクリックされた場合 -->
    sele = "end";
    type = "number";
    flg_end = !flg_end;
    flg = flg_end;
  }else if(key=="total"){   <!--「出来高」がクリックされた場合 -->
    sele = "total";
    type = "number";
    flg_total = !flg_total;
    flg = flg_total;
  }
  var target = xslobj.selectSingleNode("//xsl:sort");<!--xsl:sort処理ノードを取得-->
  <!--xsl:sort処理の各属性値を再設定 -->
  target.setAttribute("select",sele);
  target.setAttribute("data-type",type);
  if(flg)target.setAttribute("order","ascending");
  else target.setAttribute("order","descending");
  str = xmlobj.transformNode(xslobj);  <!--XML文書にXSLTを再適用 -->
  dv.innerHTML = str;
 }
//--></SCRIPT> 
</HEAD>

<BODY onload="init()">
<DIV id="dv" style="margin-left:20px;border:1px solid green">&nbsp;&nbsp;</DIV>

XMLソース

<?xml version="1.0" encoding="Shift_JIS" ?>
<root>
 <title>2004年8月20日の東証株式第一部情報</title>
 <info><name>銘柄</name><end>終値(円)</end><total>出来高(千株)</total></info>
 <data>
  <kabu><name code="6752">松下電器産業</name><end>1436</end><total>3362</total></kabu>
  <kabu><name code="6753">シャープ</name><end>1516</end><total>9077</total></kabu>
  <kabu><name code="6758">ソニー</name><end>3700</end><total>3840</total></kabu>
  <kabu><name code="6764">三洋電機</name><end>386</end><total>9712</total></kabu>
  <kabu><name code="6501">日立製作所</name><end>667</end><total>8939</total></kabu>
  <kabu><name code="6502">東芝</name><end>406</end><total>16041</total></kabu>
  <kabu><name code="6701">NEC</name><end>702</end><total>8493</total></kabu>
  <kabu><name code="6702">富士通</name><end>671</end><total>3737</total></kabu>
 </data>
 <end>以上です(2004/9/2)</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="/">
  <center><H3><xsl:value-of select="root/title"/></H3></center>
  <xsl:apply-templates select="root"/>
 </xsl:template>
  
 <xsl:template match="root">
  <table border="1">
   <tr>
    <th onclick="Change('name')"><xsl:value-of select="info/name"/></th>
    <th onclick="Change('end')"><xsl:value-of select="info/end"/></th>
    <th onclick="Change('total')"><xsl:value-of select="info/total"/></th>
   </tr>
   <xsl:for-each select="data/kabu">
    <xsl:sort select="name" data-type="text" order="ascending"/>
     <tr>
      <td><xsl:value-of select="name"/></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/11/21)

ソートの応用例（DOMを利用）