HTMLのTABLEの内容をJSの配列で設定する
以前の記事 HTMLのTABLE内容をCSVで記述するの配列版です。
JavaScript配列で<TABLE>値セット
HTMLの<table>はカラム毎に<td></td>を入れなければならないため
極めて煩わしく、人が直接記述するには大変過ぎるものです。
これをカンマ区切りのデータ記述可能とします。
例えば、次のようなテーブル
これをJSON記述によるの２次元配列によるコンパクトな表現
var data1=[
['' ,'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','"' ,'2' ,'B' ,'R' ,'b' ,'r' ]
,['-3','ETX' ,'DC3','#' ,'3' ,'C' ,'S' ,'c' ,'s' ]
,['-4','ETX' ,'DC4','$' ,'4' ,'D' ,'T' ,'d' ,'t' ]
,['-5','ENK' ,'NAK','%' ,'5' ,'E' ,'U' ,'e' ,'u' ]
,['-6','ACK' ,'SYN','&' ,'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' ,',' ,'<' ,'L' ,'\\','l' ,'|' ]
,['-D','CR' ,'GS' ,'-' ,'=' ,'M' ,']' ,'m' ,'}' ]
,['-E','SO' ,'RS' ,'.' ,'>' ,'N' ,'^' ,'n' ,'~' ]
,['-F','SI' ,'US' ,'/' ,'?' ,'O' ,'_' ,'o' ,'DEL']
];
で出せるようにします。
テーブルに値をセットする機能はJavaScript関数で作成します。
まず、実際に上のテーブルを表示させている定義を示します。JavaScript関数は
後半で示します。
<!-- CSS定義：縦横ヘッダ部の色と奇数行/偶数行のデータ部の色定義 --> <style type="text/css"> table.tt{border:1px solid black ; border-collapse:collapse;font-size:12pt} table.tt td{border:1px solid black;width:2.5em;text-align:center} table.tt tr:nth-child(odd) td:nth-child(1) {background-color:#EEAA88;} table.tt tr:nth-child(odd) td{background-color:#C8C8E8;} table.tt tr:nth-child(even) td:nth-child(1) {background-color:#FFBB88;} table.tt tr:nth-child(even) td{background-color:#E8E8FF;} table.tt th{border:1px solid black;width:2.5em;text-align:center; background-color:#FFBB88} </style> <!-- 値をセットするTABLE --> <table class=tt id='table1'> <thead></thead> <tbody></tbody> </table> <!-- データと関数呼び出し --> <script type="text/javascript"> function $E(id_){ return document.getElementById(id_); } var data1=[ ['' ,'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','"' ,'2' ,'B' ,'R' ,'b' ,'r' ] ,['-3','ETX' ,'DC3','#' ,'3' ,'C' ,'S' ,'c' ,'s' ] ,['-4','ETX' ,'DC4','$' ,'4' ,'D' ,'T' ,'d' ,'t' ] ,['-5','ENK' ,'NAK','%' ,'5' ,'E' ,'U' ,'e' ,'u' ] ,['-6','ACK' ,'SYN','&' ,'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' ,',' ,'<' ,'L' ,'\\','l' ,'|' ] ,['-D','CR' ,'GS' ,'-' ,'=' ,'M' ,']' ,'m' ,'}' ] ,['-E','SO' ,'RS' ,'.' ,'>' ,'N' ,'^' ,'n' ,'~' ] ,['-F','SI' ,'US' ,'/' ,'?' ,'O' ,'_' ,'o' ,'DEL'] ]; hiTable.set_table($E('table1'),data1); </script>
値をセットするtableには予め空のtheadとtbodyを置いています。
JavaScriptの変数data1に配列値を置いた上でset_table関数を呼んでいます。
$E()は単なるアンチジュゲム関数です。
この例では値を変数に書き下ろしていますが、JSON形式のファイル記述やAjaxアクセス
から得、表示させることも可能です。
関数の定義は次の様になっています。
<script type="text/javascript">
function $E(id_){ return document.getElementById(id_); }
function hiTable(){}
hiTable.set_td=function (tr,row,col_max){
for(var c=0;c<row.length;++c){
var td= document.createElement('td');
if(c>=col_max)td.style.display='none'; // <col>の数以上非表示
tr.appendChild(td);
td.innerHTML=row[c];
}
}
hiTable.set_th=function (tr,row,col_max){
for(var c=0;c<row.length;++c){
var td= document.createElement('th');
if(c>=col_max)td.style.display='none'; // <col>の数以上非表示
tr.appendChild(td);
td.innerHTML=row[c];
}
}
hiTable.set_table=function(tbl,param){
var thead=tbl.getElementsByTagName('thead')[0];
var tbody=tbl.getElementsByTagName('tbody')[0];
var tcols=tbl.getElementsByTagName('col');
var col_max=1000000;
if( tcols!=undefined && tcols.length!=0){// <col>がある場合数取得
col_max=tcols.length;
}
var d_start=0;
if( thead!=undefined ){ // <thead>がある場合先頭行セット
thead.innerHTML=''; // thead内容クリア
var tr= document.createElement('tr');
thead.appendChild(tr);
hiTable.set_th(tr,param[0],col_max);
d_start=1;
}
tbody.innerHTML=''; // tbody内容クリア
for(var n=d_start;n<param.length;++n){
var tr= document.createElement('tr');
tbody.appendChild(tr);
hiTable.set_td(tr,param[n],col_max);
}
}
</script>
引数で与えられた<table>から<thead>と<tbody>を取得し、 引数で与えられた配列値をセットしています。
<col>の取得とそれによる制御は、今回の本質ではありません。表示しないカラムもTABLTには
保持されており、Javascriptで取り出すことはできます。
例えば<table定義に次のように<col>定義を入れると、<col>の個数以上のカラムは
表示されません。
<table class=tt id='table2'>
<colgroup>
<col style="width:100px">
<col><col><col><col>
</colgroup>
<thead></thead>
<tbody></tbody>
</table>
CSSでカラムごとに色を変える
tdにnth-childセレクタを付加することでカラムごとに色を変えることができます。
ただし、trによる単純定義があると、tdのセレクタでの設定は有効となりません。
例えば、次の定義では奇数行のカラム1の色設定は無効です。
table.tt tr:nth-child(odd) td{background-color:#C8C8E8;}
td:nth-child(1){background-color:#C8C8E8;}
普通に考えるとより細かな指定がより広い指定より有効なはずですが、
html5は普通の考えでは作られていません。例えばcssのセレクタで色指定がある場合、colで細かく指定しても 無効です。型の定義がインスタンスの定義より強いという想像を 絶する仕様です。
| 固定リンク