SQLの窓

2017年09月28日


jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する

HTML 部分は、タイトル部分と thead のみ作成し、JSON データを取り出す毎に作り直すようになっています。

$.each でループ処理している対象のデータは row です。これは JSON オブジェクトで、1行1行のデータを保持したデータセットの配列です。

▼ フォーマット
[
        {
            "社員コード": "0001",
            "氏名": "浦岡 友也",
            "フリガナ": "ウラオカ トモヤ",
            "所属": "0003",
            "性別": "0",
            "給与": "270000",
            "手当": "9000",
            "管理者": "",
            "生年月日": "2000-01-01 00:00:00",
            "性別2": "男",
            "所属名": "営業部第三",
            "手当2": "9000"
        },
        {
            "社員コード": "0002",
            "氏名": "山村 洋代",
            "フリガナ": "ヤマムラ ヒロヨ",
            "所属": "0003",
            "性別": "1",
            "給与": "300000",
            "手当": "",
            "管理者": "",
            "生年月日": "",
            "性別2": "女",
            "所属名": "営業部第三",
            "手当2": "0"
        }
]

※ number_format() は、String.prototype.number_format として定義済みです
※ text-right は、twitter-bootstrap で定義されています
	// テーブル表示リセット
	$("#data .row_data").remove();

	// データ用
	var row_data;
	var col_data;

	// 行のループ  ( <tr></tr> )
	$.each(row, function( index, obj ) {

		// テーブルに行を追加	
		row_data = $("<tr class=\"row_data\"></tr>").appendTo( "#data" );
	
		// 行に列を追加	
		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["社員コード"] );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["氏名"] );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["フリガナ"] );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["性別2"] );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["所属"] );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["所属名"] );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.attr("class","text-right")
		// head-js.view で String.prototype に定義
		col_data.text( obj["給与"].number_format() );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.attr("class","text-right")
		// head-js.view で String.prototype に定義
		col_data.text( obj["手当2"].number_format() );

		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["生年月日"] != null ? obj["生年月日"].substr(0,10) : "" );
	
	});


1 列目をコード、2列目を氏名として、2列目のテキストにリンクを設定するには以下のよう記述します。
	$("#data .row_data").each(function(i){

		var code = $(this).find("td").eq(0).text();
		var name = $(this).find("td").eq(1).text();

		var link = '<a href="https://ドメイン/?code=' + code  +  '" target="_blank">' + name + '</a>';

		$(this).find("td").eq(1).html( link );

	});



TD の中の文字列にスタイルを適用してクリックした時のイベントを登録する(条件付)には、以下のように記述します

※ ここでは、特定の行のみ処理しています
	$("#data .row_data").each(function(i){

		var type = $(this).find("td").eq(1).text();
		var td = $(this).find("td").eq(0);

		if ( type == "特定の文字列" ) {
			td.css( 
				{ "text-decoration":"underline", "cursor":"pointer" }
			);
			td.on("click", function(){ 
				alert( $(this).text() );
			});
		}

	});



以下は対象となる HTML の記述です
<div id="req">
	<table id="data" class="table table-condensed table-hover">
	<thead>
		<tr>
		<th>コード</th>
		<th>氏名</th>
		<th>フリガナ</th>
		<th>性別</th>
		<th>所属</th>
		<th>所属名</th>
		<th class="text-right">給与</th>
		<th class="text-right">手当</th>
		<th>生年月日</th>
		</tr>
	</thead>
	</table>
</div>




【jQueryの最新記事】
posted by lightbox at 2017-09-28 20:18 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり