jquery CRUD

## data読み込み
```php:
  // ローカルストレージにdataを保存 
 function getData() {
      return JSON.parse(localStorage.getItem("students") || "[]");
    }
  → 保存 : localStorage 
  → JSONdataを : JSON.parse
  
 // 保存する時のdataを入れる配列"student"を用意 : getItem("students")
 → jqueryは、ローカルストレージを用意しないとdata保存できない

 ・保存したdata 表示
 function setData(data) {
      localStorage.setItem("students", JSON.stringify(data));
    }
  // JSONdata表示 :  JSON.stringify(data)
  // ローカルストレージに配列"student"で保存した: localStorage.setItem("students",

  // 一致したdata以外取り出したくないから、
  　　data検索用の変数(filter)を用意
    
  // data検索用変数を、検索用関数にset 
    → function renderTable(filter = "")
    
  // 部分一致 + 完全一致でdata取り出す
  　例 : 名前 : 中川　 都市 : 大森
   → 結果 : 中川 / 中 / 大森 / 大
  .filter(s => s.name.includes(filter) || s.city.includes(filter))
  
  // JSONデータをテーブルでHTMLに出力 : .map(...)
     .map((s, i) => `
       <tr>
         <td>${i + 1}</td>
         <td>${s.name}</td>
         <td>${s.city}</td>                                     <td><button class="edit-btn" data-id="${i}">Edit</button></td>  → 編集ボタン用意
         <td><button class="delete-btn" data-id="${i}">Delete</button></td>  → 削除ボタン用意
      </tr>
        `)
    // 配列から文字だけ取り出し、文字にする : .join("");

    // data出力用の変数を用意 : rows

    // 表示したいtableはたくさんある時もあり、
    　　table表示したい時、id指定
       $("#load-table").html(rows);
```

### お決まりルール

```php:
  ① 追加 / 更新 / 削除 / 検索に、必ずdata読み込み変数
 renderTable(filter = "") をつける
 →   renderTableをつけてないと、codeが
     長くなり、メンテナンスしづらくなり、
     わかりにくく見にくくなる
     function renderTable(filter = "") {
      const students = getData();
      const rows = students
        .filter(s => s.name.includes(filter) || s.city.includes(filter))
        .map((s, i) => `
          <tr>
            <td>${i + 1}</td>
            <td>${s.name}</td>
            <td>${s.city}</td>
            <td><button class="edit-btn" data-id="${i}">Edit</button></td>
            <td><button class="delete-btn" data-id="${i}">Delete</button></td>
          </tr>
        `).join("");
      $("#load-table").html(rows);
    }

 ②renderTable、何のためにある？ 役割は？
  テーブル一覧に、dataを表示させるため

 ③ 追加と更新はいつも、2つの変数をsetで使う
 　・ ストレージにdata保存 
     JSON.parse(localStorage.getItem("students") 
   ・ 保存したJSONを呼び出す 
   localStorage.setItem("students", JSON.stringify(data))

   ④ ボタン押した時に必須の処理 : e.preventDefault();
      ボタンを押したら、フツーはページが勝手にどこかに
   　 飛んでいってしまう。
      ボタンを押した時、ページが勝手に飛んだり勝手に
      再読み込みされないよう、ajax通信では必須のもの

    ⑤ 新規テーブルで作られるボタンの扱い、注意！ 
      新規作成した時作られる 削除ボタン/ 更新ボタン
    　は、元々htmlになく、新しく作られる
      → いつも、$(document)使う
      → 元々htmlにないものを使うのは、document
      例
      $(document).ready(function(){
      renderTable();
      $(document).on("click", ".delete-btn", function(){
      $(document).on("click", ".edit-btn", function(){

      ⑥ 元々htmlにあるものを使うときは、#を使う
      $("#editForm").on("submit", function(e){

      ⑦ ボタンの扱い　違い
      　  もの              使うもん　　　書き方
       新しく作るテーブル 　  ボタンID   　$(document)
　　　　の編集 / 削除ボタン
       
       入力formと編集form   formID      $("#editForm")
```

### 追加

```php:
  // dataはまた新しく入れたいから、最後に必ず
  変数を、空にしておく
   → this.reset();

  // dataを入れる入れ物  :  form id="addForm"
```

### 削除

```php:
  // ボタンを押したら、dataを消す
  data.splice(id, 1);

  // ボタン "delete-btn"
  <button class="delete-btn" data-id="${i}">
```

### 編集 : 一覧の編集ボタン押したら、編集form表示

```php:
  // 編集form表示とdataを編集する作業は、内容が違う

  // 編集formを表示させる時、テーブルから登録してる
  　　dataを引っ張ってくる作業がいるから
  
  // テーブル一覧の編集ボタン押したら、編集するdataのid取得
   $(document).on("click", ".edit-btn", function(){
     const id = $(this).data("id");
     → data登録時、idがあり、idを取得しないと
     　dataを編集できないから

  // id・名前・都市・編集ボタンを表示
        $("#edit-id").val(id);
        $("#edit-name").val(data[id].name);
        $("#edit-city").val(data[id].city);
        $("#edit-form").show();

  // ボタン "edit-btn"
  <button class="edit-btn" data-id="${i}">
```

### 編集 : 編集し、編集したdataをテーブルに送る

```php:
 // 更新ボタン押されたら
  $("#editForm").on("submit", function(e){

  // 編集したら、dataをローカルに保存してからid更新
  const data = getData();
  data[id] = { name, city };

  // id更新したら、tableに出力し、data読み込み
  setData(data);
  renderTable();
```

### 検索

```php:
 // data検索用変数 term　用意
  const term = $(this).val();

 // dataを入れる入れ物  :  入力form id="search"
 <input type="text" id="search" placeholder="Search by name or city">
```

# code全文

https://qiita.com/k8p4tw/items/89dd9956048792e035aa