ソース
$(document).ready(function(){ var keys=['id','name','value1','value2']; var ary=[ [1,'neko',101,1001], [2,'nezumi',202,2002], [3,'usi',303,3003], [4,'tora',404,4004], [5,'u',505,5005], ]; //2次元配列とキー配列から連想配列オブジェクト(エンティティリスト)を作成する。 var hash=createHashFromAry(keys,ary); //★連想配列オブジェクトからテーブルHTMLを生成する。 var html=createTbl_hash(hash); $("#tbl_div").html(html); }); /** * 2次元配列とキー配列から連想配列オブジェクト(エンティティリスト)を作成する。 * @param keys キー配列 * @param ary 2次元配列 * @returns 連想配列オブジェクト */ function createHashFromAry(keys,ary){ var obj={}; var x_cnt=ary[0].length; for(var y=0;y<ary.length;y++){ var ent={}; for(var x=0;x<x_cnt;x++){ ent[keys[x]]=ary[y][x]; } obj[y]=ent; } return obj; } /** * 連想配列オブジェクトからテーブルHTMLを生成する。 * キーをヘッダーの名前に利用する。 * @param hash 連想配列オブジェクト * @return テーブルHTML */ function createTbl_hash(hash){ //1行目のエンティティからヘッダー部分を組み立て var html="<table border='1'><thead><tr>" for(var k in hash[0]){ html+="<th>" + k + "</th>"; } html+="</th></thead>\n"; html+="<tbody>\n"; //連想配列をループ。 for(var i in hash){ html+="<tr>"; var ent=hash[i]; for(var k in ent){ var v=ent[k]; html+="<td>" + v + "</td>"; } html+="</tr>\n"; } html+="</tbody></table>\n"; return html; }