ＳＱＬの窓 イラストAC フリー素材
<< 雪を降らす snowstorm.js の 特定 DIV 内… | TOP | DAZ3D で Quad Tank が無料になってたの… >>

2015年11月20日

tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン

 
デモページ

ダウンロードページ

純国産プラグインです。使用方法も日本語です。

とにかく、元データとして JSON を想定していて、とりあえず TABLE を作成したい場合に便利です。ここから他のプラグインで加工するベースにするといいと思います。

注意事項

圧縮バージョンが配布されていないので、必要ならば自分で行う必要がありますが、packer ではエラーになるので、Online JavaScript/CSS Compressor を使用しました

サンプルコード

<script src="tableMagic/js/jquery.tablemagic-min.js"></script>

<link rel="stylesheet" href="css.php">
<style>
.trEven {
	background-color: #FFFFFF;
}
.trOdd {
	background-color: #F1F4F8;
}

#target table * {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
	font-size: 16px;
}
#target table {
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#target table td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	white-space: nowrap;
}
#target table th {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
	white-space: nowrap;
}
</style>
<script>
// jQuery 初期処理
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#target').tableMagic(
			data,
			{
				firstColTd2Th: false
			}
		);


		customTable();

	});



});

function customTable() {

		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}


</script>
</head>
<body>

<div id="target"></div>



customTable は、直接関係ありません。出来上がったテーブル内のデータを後から jQuery でカスタマイズしています。

firstColTd2Th: false は、デフォルトでは先頭列が TH になってしまうので変更しています。( テーブルの見栄えは、好みで CSS で変更するといいでしょう )
【jQueryの最新記事】
posted by at 2015-11-20 21:40 | jQuery | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa