naoto-mizunuma/firebase_crud.html

## firebase_crud.html
<html>
<head>
  <title>firebase-crud-test</title>
  <meta charset="utf-8">

  <script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
  <script>
    window.onload = function(){
      /*
      * Initialize Firebase
      */
      var config = {
        apiKey: "AIzaSyAa2o0rn7Dzck-twQwCRP3DUDjjG_EKpW8",
        authDomain: "fir-test-no9-r1.firebaseapp.com",
        databaseURL: "https://fir-test-no9-r1.firebaseio.com",
        storageBucket: "fir-test-no9-r1.appspot.com",
        messagingSenderId: "270240482150"
      };
      var mainApp = firebase.initializeApp(config);

      /*
      * CRUD
      */
      var input_text = document.getElementById("input_text");
      var submit_btn = document.getElementById("submit_btn");
      var edit_key_data = document.getElementById("edit_key_data");
      var memo_list = document.getElementById("memo_list");
      var crud = mainApp.database().ref('test/crud');

      // ** read **
      //読み込み時イベント
      crud.on('child_added', function(ss) {
        memo_list.appendChild(list_template(ss));
      });
      //変更時イベント
      crud.on('child_changed', function(ss) {
        var edit_element =  document.getElementById(ss.key);
        edit_element.innerHTML = list_template(ss).innerHTML;
      });
      //削除時イベント
      crud.on('child_removed', function(ss) {
        var remove_element =  document.getElementById(ss.key);
        memo_list.removeChild(remove_element);
      });

      // ** create **
      submit_btn.onclick = function(){
        if(edit_key_data.value == ""){
          crud.push(input_text.value);
        }else{
          crud.child(edit_key_data.value).set(input_text.value);
          submit_btn.value = "追加";
          edit_key_data.value = "";
        }
        input_text.value = "";
      }
      function list_template(ss){
        var li = document.createElement("li");
        li.innerHTML = ss.val();
        li.setAttribute('id', ss.key);

        // ** update **
        var edit_btn = document.createElement("input");
        edit_btn.type = "button";
        edit_btn.value = "編集";
        function edit_func(ss){
          input_text.value = ss.val();
          edit_key_data.value = ss.key;
          submit_btn.value = "編集";
        }
        edit_btn.addEventListener("click", function(){ edit_func(ss); }, false);

        // ** delete **
        var delete_btn = document.createElement("input");
        delete_btn.type = "button";
        delete_btn.value = "削除";
        function delete_func(ss){
          crud.child(ss.key).remove();
        }
        delete_btn.addEventListener("click", function(){ delete_func(ss); }, false);


        li.appendChild(edit_btn);
        li.appendChild(delete_btn);
        return li;
      }
    }
  </script>
</head>
<body>
  <input type="text" id="input_text">
  <input type="button" id="submit_btn" value="追加">
  <input type="hidden" id="edit_key_data">
  <div id="memo_list"></div>
</body>
</html>
	<html>
	<head>
	<title>firebase-crud-test</title>
	<meta charset="utf-8">

	<script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
	<script>
	window.onload = function(){
	/*
	* Initialize Firebase
	*/
	var config = {
	apiKey: "AIzaSyAa2o0rn7Dzck-twQwCRP3DUDjjG_EKpW8",
	authDomain: "fir-test-no9-r1.firebaseapp.com",
	databaseURL: "https://fir-test-no9-r1.firebaseio.com",
	storageBucket: "fir-test-no9-r1.appspot.com",
	messagingSenderId: "270240482150"
	};
	var mainApp = firebase.initializeApp(config);

	/*
	* CRUD
	*/
	var input_text = document.getElementById("input_text");
	var submit_btn = document.getElementById("submit_btn");
	var edit_key_data = document.getElementById("edit_key_data");
	var memo_list = document.getElementById("memo_list");
	var crud = mainApp.database().ref('test/crud');

	// read
	//読み込み時イベント
	crud.on('child_added', function(ss) {
	memo_list.appendChild(list_template(ss));
	});
	//変更時イベント
	crud.on('child_changed', function(ss) {
	var edit_element = document.getElementById(ss.key);
	edit_element.innerHTML = list_template(ss).innerHTML;
	});
	//削除時イベント
	crud.on('child_removed', function(ss) {
	var remove_element = document.getElementById(ss.key);
	memo_list.removeChild(remove_element);
	});

	// create
	submit_btn.onclick = function(){
	if(edit_key_data.value == ""){
	crud.push(input_text.value);
	}else{
	crud.child(edit_key_data.value).set(input_text.value);
	submit_btn.value = "追加";
	edit_key_data.value = "";
	}
	input_text.value = "";
	}
	function list_template(ss){
	var li = document.createElement("li");
	li.innerHTML = ss.val();
	li.setAttribute('id', ss.key);

	// update
	var edit_btn = document.createElement("input");
	edit_btn.type = "button";
	edit_btn.value = "編集";
	function edit_func(ss){
	input_text.value = ss.val();
	edit_key_data.value = ss.key;
	submit_btn.value = "編集";
	}
	edit_btn.addEventListener("click", function(){ edit_func(ss); }, false);

	// delete
	var delete_btn = document.createElement("input");
	delete_btn.type = "button";
	delete_btn.value = "削除";
	function delete_func(ss){
	crud.child(ss.key).remove();
	}
	delete_btn.addEventListener("click", function(){ delete_func(ss); }, false);


	li.appendChild(edit_btn);
	li.appendChild(delete_btn);
	return li;
	}
	}
	</script>
	</head>
	<body>
	<input type="text" id="input_text">
	<input type="button" id="submit_btn" value="追加">
	<input type="hidden" id="edit_key_data">
	<div id="memo_list"></div>
	</body>
	</html>