HTMLのTABLE内容をCSVで記述する

HTMLのTABLEの内容をJSの配列で設定する にJavaScriptの配列からTABLEをセットする方法を載せました。より応用がきく方法です。

 <table>記述は簡素化されるべきである。

HTMLの<table>はカラム毎に<td></td>を入れなければならないため 極めて煩わしく、人が直接記述するには大変過ぎるものです。
これをカンマ区切りのデータ記述可能とします。

例えば、次のようなテーブル

を出そうとすると、大規模な記述が必要となります。
これをコンパクトな表現

<style type="text/css">
table.tt{border:1px solid black ; border-collapse:collapse}
table.tt td{border:1px solid black;width:2.5em;text-align:center}
</style>
<table class=tt id=table1 contents="
  ,0-  ,1- ,2-    ,3-    ,4-,5-,6-,7-$
-0,NULL,DLE,SP    ,0     ,@ ,P ,' ,p$
-1,STX ,DC1,!     ,1     ,A ,Q ,a ,q$
-2,SOT ,DC2,&quot;,2     ,B ,R ,b ,r$
-3,ETX ,DC3,#     ,3     ,C ,S ,c ,s$
-4,ETX ,DC4,%R%   ,4     ,D ,T ,d ,t$
-5,ENK ,NAK,%     ,5     ,E ,U ,e ,u$
-6,ACK ,SYN,&amp; ,6     ,F ,V ,f ,v$
-7,BEL ,ETB,'     ,7     ,G ,W ,g ,w$
-8,BS  ,CAN,(     ,8     ,H ,X ,h ,x$
-9,HT  ,EM ,)     ,9     ,I ,Y ,i ,y$
-A,LF  ,SUB,*     ,:     ,J ,Z ,j ,z$
-B,VT  ,ESC,+     ,;     ,K ,[ ,k ,{$
-C,FF  ,FS ,%C%   ,&lt;  ,L ,\ ,l ,|$
-D,CR  ,GS ,-     ,=     ,M ,] ,m ,};
-E,SO  ,RS ,.     ,&gt;  ,N ,^ ,n ,~$
-F,SI  ,US ,/     ,?     ,O ,_ ,o ,DEL"
></table>
<script type="text/javascript">
setTableContents(document.getElementById('table1'));
</script>

で出せるようにします。
テーブルの内容(ContentsOfTable)はtable のcontentsに文字列で 記述します。
カラムの区切りをカンマ( , )で 行の区切りをドルサイン( $ )で現しています。 それぞれの文字の 本文中での代替として%C%と%R%を使っています。 区切り文字は区切り制御用に使いますのでその代わりに書くものです。エスケープ記号による指定は 事態を複雑にしますので、採用していません。

setTableContents関数は次のようになっています。

<script type="text/javascript">
function setCols(tr,cols,opt){
   for(var c=0;c<cols.length;++c){
      var td= document.createElement('td');
      tr.appendChild(td);
      td.innerHTML=cols[c].replace(/%R%/g,'$').replace(/%C%/g,',');
      }
   }
function setRows(tbody,rows,opt){
   for(var r=0;r<rows.length;++r){
      var tr= document.createElement('tr');
      tbody.appendChild(tr);
      setCols(tr,rows[r].split(','));
      }
   }
function setTableContents(table){
   var contents = table.getAttributeNode('contents').value;
   var tbody    = document.createElement('tbody');
   table.appendChild(tbody);
   setRows(tbody,contents.split('$'));
   }
</script>

 実用性を高める

実用性を考えると、区切り文字指定や、tbodyのみの 取り扱いなども欲しいので、次の様に機能強化しました。

(関数名に2を付けてあるのは、前出の関数とぶつからないようにしたもので このセットのみの場合関数名の2は取り払う方が望ましい)

<script type="text/javascript">
function hiAttrVal(obj,name,dflt){
   if( !obj.getAttributeNode(name) )return dflt;
   return obj.getAttributeNode(name).value;
   }
function setCols2(tr,cols,opt){
   for(var c=0;c<cols.length;++c){
      var td= document.createElement('td');
      tr.appendChild(td);
      td.innerHTML=cols[c]
                   .replace(opt.altRowDlmt,opt.rowDlmt)
                   .replace(opt.altColDlmt,opt.colDlmt);
      }
   }
function setRows2(tbody,rows,opt){
   for(var r=0;r<rows.length;++r){
      var tr= document.createElement('tr');
      tbody.appendChild(tr);
      setCols2(tr,rows[r].split(opt.colDlmt),opt);
      }
   }
function hiGetOpt(obj,dflt) {
   var opt={
      rowDlmt:hiAttrVal(obj,"row-delimiter",dflt.rowDlmt),
      colDlmt:hiAttrVal(obj,"column-delimiter",dflt.colDlmt)
      };
   var ard= obj.getAttributeNode("alt-row-delimiter");
   if( !ard ) opt.altRowDlmt= dflt.altRowDlmt;
   else       opt.altRowDlmt= new RegExp(ard.value,"g");
   var crd= obj.getAttributeNode("alt-column-delimiter");
   if( !crd ) opt.altColDlmt= dflt.altColDlmt;
   else       opt.altColDlmt= new RegExp(crd.value,"g");
   return opt;
   }
function setTableContents2(table){
   var paramDflt = {
      rowDlmt:"$",
      colDlmt:",",
      altRowDlmt:/%R%/g,
      altColDlmt:/%C%/g
      };
   var contents = hiAttrVal(table,"contents",null);
   var opt= hiGetOpt(table,paramDflt);
   if( contents!=null ){
      var tbody= document.createElement('tbody');
      table.appendChild(tbody);
      setRows2(tbody,contents.split(opt.rowDlmt),opt);
      }
   else if( table.tBodies != undefined ){
      var bodies= table.tBodies;
      for(var b=0;b<bodies.length;++b){
         var tbody2    = bodies[b];
         var contents2 = hiAttrVal(tbody2,"contents",null);
         if( contents2!=null ){
            var opt2      = hiGetOpt(tbody2,opt);
            setRows2(tbody2,contents2.split(opt2.rowDlmt),opt2);
            }
         }
      }
   }
</script>

オプション指定: 区切り文字とその代替表記はオプション指定があります。なお、区切り文字は 単純文字であり、大体文字列は正規表現となります。

オプション	説明	デフォルト

もちろん、このテーブルも本機能を用いて表示しています。theadで カラム毎のサイズなどを決め、tbodyに本機能を用いたcontentsを セットしています。区切り文字、代替文字列も指定しています。

<style type="text/css">
table.ttt{border:1px solid black ; border-collapse:collapse}
table.ttt td{border:1px solid black}
table.ttt th{border:1px solid black}
</style>
<table class=ttt id=table2 style="width:100%">
<thead>
<tr><td style="width:9em">オプション</td>
    <td style="width:10em">説明</td>
    <td>デフォルト</td></tr>
</thead>
<tbody row-delimiter='#'       column-delimiter='|'
       alt-row-delimiter='!R!' alt-column-delimiter='!C!'
       contents="
row-delimiter       |行区切り          |row-delmiter='$'#
column-delimiter    |カラム区切り      |column-delimiter=','#
alt-row-delimiter   |行区切り代替文字列|alt-row-delimiter='%R%'#
alt-column-delimiter|行区切り代替文字列|alt-colum-delimiter='%C%'"
></tbody>
</table>
<script type="text/javascript">
setTableContents2(document.getElementById('table2'));
</script>

 補足

IEと<table>のinnerHTML：

この記事のプログラムでは<td>要素のみinnerHTMLをセットしています。

IEでは<table>や<tbody>などはinnerHTMLがread-onlyなのです。
これは本質的にはIEのバグです。しかしMicroSoftのプログラムには バグは存在しません。印刷時に項目が消えるExcelも、変数の扱いがおかしく なっているバッチも、たまにプログラムが落ちてしまうのも含め全てが 「仕様」なのです。うまく動かないのは全て利用者が仕様を理解していない ことが原因です。
IEが早く無くなってしまうことを望む人が多いのも少し頷けます。個人的には 他のブラウザだって結構問題ありと思いますが。

本格化：

テーブルをこのような形とすることは実用性が極めて高いと考えています。

◇HTMLのTABLEの色を１行毎に変える方法 で作った行毎に色を設定する機能と合わせた実用.jsを作成するつもり です。（既に開発され一般化されているものが見つかれば作成はしません）

＃＃＃　変更履歴

2010/7/26:標準をセミコロン区切りからカンマ区切りに変更し、記事タイトル にCSVを追加。