JavaScriptで配列データから動的に表の作成

リセマラデータを取って記事にその結果を表形式で書いていたが、その時は総計や出現割合をわざわざ手計算して出していた。さすがに面倒臭くなったので、JavaScriptでデータ配列から動的に総計や出現割合を計算して表にしたいと感じ始めた。だが、Google先生に聞いても自分に合ったやり方がみつからなかったので自分で関数を作りました。
日付ごとにデータを集計するのに使えるかと思います。
例ではリセマラデータを使っているので今回は使わないデータも混じっています。

JavaScriptは初心者なのでおかしなところがあれば教えていただけるとありがたいです。
何をしているかはコメントの部分で軽く説明します。

コード

// 表を表示する場所に入れるdivタグ
<div id ="table"></div>

<script language=javascript>
<!--
// 配列データ中の集計するデータをカウントする関数
function cnt(data,sep){
    var cnt=[]; // カウントしたデータを入れる変数
    // 表にする日付の数だけループ
    for(i=0;i<data.length;i++){
        cnt.push([0,0,0]);
        // 配列を順番に見ていき、それぞれの数値毎にカウントする
        for(j=sep;j<data[i].length;j+=sep){
            switch(data[i][j][0]){
                case 3:
                    cnt[i][0]++;
                    break;
                case 4:
                    cnt[i][1]++;
                    break;
                case 5:
                    cnt[i][2]++;
                    break;
            }
        }
    }
    return cnt;
}

// 表をつくる関数
function makeTable(data,cnt,divname){
    // 表に表示するテキストデータをまとめる
    // 例：ここでは以下のような形式になります(配列に一行で書き込むデータ毎にまとめた配列を入れれば動くはずです)
    // [[日付,☆3,☆4,☆5],[5/2,4,2,0],[5/3,4,2,2],[5/4,2,2,0],[総計,10,6,2],[割合(%),55.5,33.3,11.1]]
    var tableText=[["日付","☆3","☆4","☆5"]];
    var sum=[0,0,0,0]
    // 表に表示するテキストデータをまとめる
    for(i=0;i<data.length;i++){
        tableText.push([data[i][0]]);
        for(j=0;j<3;j++){
            tableText[i+1].push(cnt[i][j]);
            sum[j]+=cnt[i][j];
            sum[3]+=cnt[i][j];
        }
    }
    tableText.push(["総計",sum[0],sum[1],sum[2]]);
    // 割合を出す時は小数第二位以下を切り捨てる
    tableText.push(["割合(%)",Math.floor(sum[0]/sum[3]*1000)/10,
    Math.floor(sum[1]/sum[3]*1000)/10,Math.floor(sum[2]/sum[3]*1000)/10]);

    // 表の作成開始
    var rows=[];
    var colorCode=["#B0C4DE","#FFDAB9"];
    var table = document.createElement("table");
    for(i=0;i<tableText.length;i++){
        // 行の追加
        rows.push(table.insertRow(-1));
        for(j=0;j<4;j++){
            // 追加した行にセルを追加してテキストを書き込む
            cell=rows[i].insertCell(-1);
            cell.appendChild(document.createTextNode(tableText[i][j]));
            // 背景色の設定
            if(i==0){
                cell.style.backgroundColor=colorCode[0];
            }else if(i>tableText.length-3){
                cell.style.backgroundColor=colorCode[1];
            }
        }
    }
    // 指定したdiv要素に表を加える
    document.getElementById(divname).appendChild(table);
}

// 例で使用したデータ配列
var data = 
[["5/2",[3,"ドラゴンゾンビ"],[3,"白龍"],[4,"ストームドラゴン"],[3,"ライトニングホース&ライトファイター"],[4,"ホーリードラゴン"],[3,"イクシオン"]],
["5/3",[5,"ロキ"],[5,"ネプチューン"],[3,"ファイアファイター&フレイムホース"],[4,"ウンディーネ"],[3,"ファイアマジシャン"],[3,"ドラゴンゾンビ"],[3,"ダークファイター&シャドーホース"],[4,"ウンディーネ"]],
["5/4",[3,"ミノタウロス"],[4,"ワイバーン"],[4,"デュラハン"],[3,"スカルドラゴン"]]];

// 関数呼び出し
makeTable(data,cnt(data,1),"table");

-->
</script>

実行結果

使い方

1. 表を入れたい部分に<div id ="id(何でもよい)"></div>を入れる
2. データ配列の作成(データ配列の形式はmakeTable関数の最初の部分とcnt関数を変えていただければ自由に変えられます)
3. 適当な所で関数を定義してmakeTable(データ配列,cnt(データ配列,カウントする間隔),"divで定義したid");で呼び出す。カウントする間隔というのはデータ配列を一つおきにカウントしたい場合は2にする等で、基本は1で全てのデータをカウントして良いかと思います。