DOMを利用して表の生成

XML文書からDOMを使いデータを取り出し、HTMLの<TABLE>、<TR>、<TH>、<TD>タグにはめ込んでいく。JavaScriptのforループ文を利用すれば効率的。最終的にHTML要素のinnerHTMLプロパティで表示する。

XMLソース

<?xml version="1.0" encoding="Shift_JIS" ?>
<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/5/4)</end>
</root>

XSLソース

<SCRIPT language="JavaScript"><!--
 function Test(){
  var xmlobj=new ActiveXObject("MSXML2.DOMDocument");
  xmlobj.async=false;
  xmlobj.load("table01.xml");


  var str = "<table width='80%' border='1' cellpadding='3'>";
  //表のタイトル
  str += "<caption>" + xmlobj.selectSingleNode("//title").text + "</caption>";
  //表の見出し行
  str += "<tr><th>コード番号</th>";
  var objInfo = xmlobj.selectSingleNode("//info").childNodes;
  for(m=0;m<objInfo.length;m++){
    str += "<th>" + objInfo.item(m).text + "</th>";
  }
  str += "</tr>";
  //行と列をforループ文で生成
  var objKabu = xmlobj.getElementsByTagName("kabu");
  for(i=0;i<objKabu.length;i++){
    str += "<tr>";
    objChilds = objKabu.item(i).childNodes;
    str += "<td>" + objChilds.item(0).getAttribute("code") +"</td>";
    for(j=0;j<objChilds.length;j++){
      str += "<td>" + objChilds.item(j).text + "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";
  dv.innerHTML = str;
 }
//--></SCRIPT> 
</HEAD>


<BODY>
<P>XML文書からデータを読み込み <button onclick="Test()">表の生成</button></P>
<DIV id="dv" style="margin-left:20px;border:1px solid green">（ここに表を表示）</DIV>

end(04/5/4)