ＳＱＬの窓 イラストAC フリー素材
<< Firebase に定義した Realtime Database … | TOP | IE11 : JScript : Excel.Application で… >>

2019年08月20日

Firebase の Realtime Database の JSON を jQuery の $.ajax で読み込んで TABLE を作成する

 
Firebase の Realtime Database の JSON は、access-control-allow-origin: * を出力するので、どこからでも利用できます。



<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		$.ajax({
			url: "https://プロジェクト名-xxxxx.firebaseio.com/syain.json",
			cache: false,
			data: { "name" : $("#sname").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// tabble 作成
			loadData( data );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// JSON => table
// **************************************
function loadData( data ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	// 行のループ  ( <tr></tr> )
	$.each(data, function( key, syain ) {

		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}

		var re = new RegExp($("#sname").val());
		if ( syain.name.search(re) != -1  ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );
	
			$("<td></td>").appendTo( row_data ).text( syain.code );
			$("<td></td>").appendTo( row_data ).text( syain.name );
			$("<td></td>").appendTo( row_data ).text( syain.furi );
			$("<td></td>").appendTo( row_data ).text( syain.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (syain.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( syain.kanri );
			$("<td></td>").appendTo( row_data ).text( syain.birthday );
		
		}

		// キーの数
		index++;
	
	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

</body>
</html>
【JavaScriptの最新記事】
posted by at 2019-08-20 17:52 | JavaScript | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa