SQLの窓

2016年10月03日


jQuery で既存 table より Firebase Database のデータを作成する

サンプルページ


このページでは実際には更新できませんが、自分のスニペットをコピーして貼り付けて使用すると更新できます。このデータは Wikipedia にあるテーブルをデベロッパーツールでコピーして貼り付けたものです。欲しい行を限定したい場合は、先頭の TD に class="result" を入れておくというスタイルです。

二番目の処理は、TR の中に TD が無いので、JSON の中に jojo0 は作成されますが、値が空のオブジェクトとなるのでデーターベースにデータは作成されません

更新部分のソースコード
<script>

var jojo = { };

$(function(){

	$("#update1").on("click",function(){
		
		if ( confirm( config.authDomain + "へ更新しますか? \n(ルールで更新を許す必要があります)" ) ) {

			$(".result").each( function( idx ){
			
				jojo["jojo" + (idx+1) ] = {};
				
				$(this).parent().find("td").each( function( idx2 ){
				
					jojo["jojo" + (idx+1) ]["data" + idx2] = $(this).text();
				
				} );
				
			
			} );
			
			firebase.database().ref("jojo").set(jojo).then(
					function(){
						alert( "更新に成功しました" );
					}
			);

		}
	});

	$("#update2").on("click",function(){
		
		if ( confirm( config.authDomain + "へ更新しますか? \n(ルールで更新を許す必要があります)" ) ) {

			$("tr").each( function( idx ){
			
				jojo["jojo" + idx ] = {};
				
				$(this).find("td").each( function( idx2 ){
				
					jojo["jojo" + idx ]["data" + idx2] = $(this).text();
				
				} );
				
			
			} );
			
			firebase.database().ref("jojo").set(jojo).then(
					function(){
						alert( "更新に成功しました" );
					}
			);

		}
	});

	$("#update3").on("click",function(){
		
		if ( confirm( config.authDomain + "へ更新しますか? \n(ルールで更新を許す必要があります)" ) ) {

			$("tr").each( function( idx ){
			
				jojo["jojo" + idx ] = {};
				
				$(this).find("td,th").each( function( idx2 ){
				
					jojo["jojo" + idx ]["data" + idx2] = $(this).text();
				
				} );
				
			
			} );
			
			firebase.database().ref("jojo").set(jojo).then(
					function(){
						alert( "更新に成功しました" );
					}
			);

		}
	});

});

</script>
※ データベースルールを書き込み可能にしておく必要があります


タグ:jquery Firebase
【Googleの最新記事】
posted by lightbox at 2016-10-03 02:17 | Google | このブログの読者になる | 更新情報をチェックする
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり