テーブルCRUD 手順書

### 目次
<ul>
<li>入力formとボタン追加</li>
<li>2.追加ボタン作成</li>
<li>3.名前のバリデーション　入れる</li>
<li>4.編集画面form htmlに追加</li>
<li>5.保存ボタン要素作成　＋ 保存処理</li>
<li>6.キャンセルボタン要素作成　＋ キャンセル処理</li>
<ul>

<h2>1.入力formとボタンを追加</h2>

```js:
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>編集フォームをテーブル下に表示</title></head>
<body>
  <h2>練習</h2>
  名前：<input type="text" id="nameInput" />
  <button id="addBtn">追加</button>

<script>
  const addBtn = document.getElementById('addBtn');
  const nameInput = document.getElementById('nameInput');
  </script>
</body>
</html>
```

<br>
<h3>ボタン押したらconsole.log「クリックされた」と表示</h3>

<h4>配列　追加</h4>

```js:
const nameInput = document.getElementById('nameInput');
//ここに　追加
let dataArray = [];
```

<h2>2.追加ボタン作成</h2>
<h3>ボタンのイベントリスナー追加</h3>

```js:
let dataArray = [];
//ここに　追加
addBtn.addEventListener('click', function () {
}
```
<br>
<h3>イベントリスナーに、クリックされた、と表示</h3>

```js:
addBtn.addEventListener('click', function () {
 //ここに追加
 console.log("クリックされた");
}
```

<br>
<h2>３.テーブル表示</h2>

<h3>テーブル要素表示　追加</h3>

```js:
const nameInput = document.getElementById('nameInput');
//ここに　追加
const tbody = document.querySelector('#table tbody');
```

<br>
<h3>テーブル表示させる htmlに追加</h3>

```js:
  <button id="addBtn">追加</button>

  //3行　追加
  <table id="table" border="1">
    <tbody id="tbody"></tbody>
  </table>
```

<h3>追加ボタン押したら、名前を取得し名前表示</h3>

```js:
function renderTable() {
}

// ここに追加
addBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();
  console.log(name); // ← デバッグ用
  dataArray.push(name);
  renderTable(); // ← 表示
});
```
<br>
<h2>3.名前のバリデーション　入れる</h2>
<h3>追加ボタンが押され名前表示する後に、バリデーション</h3>

```js:
addBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();

  //ここに追加
  if (name === '') {
    alert('名前を入力してください');  ← インデント二個開ける
    return;  ← インデント二個開ける
  }
  //ここまで
  dataArray.push(name);
  renderTable();
```

<h3>追加ボタンで送信が終わったら、入力forme初期化</h3>

```js:
addBtn.addEventListener('click', () => {
  if (name === '') {
  }
  dataArray.push(name);
  renderTable();
  
  // ここに追加
  nameInput.value = '';
});
```

<br>
<h3>編集インデックス要素を新しく作る + テーブル初期化</h3>

```js:
//一か所目
let dataArray = [];
//ここに　追加
let editIndex = -1;


///2か所目
let editIndex = -1;
//ここに　2行 追加
function renderTable() {
    tbody.innerHTML = '';  ← インデント、ニ個開けてな
}
```

<br>
<h4>テーブルに名前を表示させたいから、名前要素　追加 + 名前取得</h4>

```js:
function renderTable() {
  tbody.innerHTML = ''; 
  //ここに　4行 追加
  dataArray.forEach((name, index) => {
    const tr = document.createElement('tr');  ← インデント2個開けて
    const tdName = document.createElement('td');  ← インデント2個開       tdName.textContent = name;
    tr.appendChild(tdName);
  });  ← dataArrayに合わせる
}   ← renderTableに合わせる
```

<br>
<h4>編集ボタン要素 追加</h4>

```js:
dataArray.forEach((name, index) => {
  tr.appendChild(tdName);
  
  //ここに　4行 追加
  const tdEdi = document.createElement('td');
  const ediBtn = document.createElement('button');
  ediBtn.textContent = '編集';
```


<br>
<h4>編集ボタンが押された時の処理、追加（イベントリスナー)</h4>

```js:
dataArray.forEach((name, index) => {

  ediBtn.textContent = '編集';
  //ここに　3行 追加
  ediBtn.addEventListener('click', () => {
    nameInput.value = name;
    editIndex = index;
    console.log(name);
    });
```

<br>
<h4>編集ボタン表示設定し、画面にdataが表示されるか確認</h4>

```js:
  ediBtn.addEventListener('click', () => {
  console.log(name);
  });
  //ここに　追加
  tr.appendChild(tdName);  // ← 名前を先 表示
  tr.appendChild(tdEdi);
  tbody.appendChild(tr);
```

<h3>編集ボタンのイベントリスナー追加</h3>

```js:
  
//2か所目
dataArray.forEach((name, index) => {
  ediBtn.textContent = '編集';
  //ここに　2行 追加
  ediBtn.addEventListener('click', () => {
  });
```


<h3>名前を表示させ、名前が表示できてるか確認</h3>

```js:
    dataArray.forEach((name, index) => {
      ediBtn.addEventListener('click', () => {
      //ここに　3行 追加
      nameInput.value = name;
      editIndex = index;
      console.log(name);
      });
```

<br>
<h3>テーブル表示方法を変える</h3>

```js:変更前
function renderTable() {
    dataArray.forEach((name, index) => {
      console.log(name);
    });
    
    //変えるのはここだ
    tr.appendChild(tdName);  // ← 名前を先に表示
    tr.appendChild(tdEdi);
    //終了
    tbody.appendChild(tr);
    });
}
```

```js:変更後
function renderTable() {
    dataArray.forEach((name, index) => {
      console.log(name);
    });
    
    //変えるのはここだ
    tr.appendChild(tdName);  // ← 名前を先に表示
    tr.appendChild(tdEdi);
    //終了
    
    tbody.appendChild(tr);
    });
}
```

<h4>ここまでの結果画面</h4>

![スクリーンショット 2025-06-15 18.10.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628823/b20d05ce-088f-41d3-91e5-511849e72bc7.png)


<h3>削除ボタン追加</h3>

<h4>削除ボタン　要素取得<h4>

```js:変更前
function renderTable() {
    tbody.innerHTML = '';
    dataArray.forEach((name, index) => {
      tr.appendChild(tdEdi);
      tbody.appendChild(tr);

      //ここに追加
      
      });
```

```js:変更後
   tbody.appendChild(tr);
   const tdDel = document.createElement('td');
   const delBtn = document.createElement('button');
   delBtn.textContent = '削除';
   });
```

<h3>削除ボタンが押された処理　追加</h3>

```js:
delBtn.textContent = '削除';

 //ここに追加
 delBtn.addEventListener('click', () => {
        dataArray.splice(index, 1);
        renderTable();
        editIndex = -1;
 });  ← インデントはdelBtnと同じ
 tdDel.appendChild(delBtn);
 tr.appendChild(tdDel);
 tbody.appendChild(tr);
 
 //ここまで追加
```
<h4>tbody.appendChild(tr)を修正</h4>

```js:
 //tbodyは一個でいいから、編集のを削除
 ediBtn.addEventListener('click', () => {
        nameInput.value = name;
        editIndex = index;
        console.log(name);
      });
      tdEdi.appendChild(ediBtn);
      tr.appendChild(tdEdi);
      //ここを削除
      tbody.appendChild(tr);
      //削除終わり
```

<br>
<h3>編集画面form  作成</h3>
<h4>編集画面form htmlに追加[編集form作成]</h4>

```js:
<table border="1" id="table">
    <thead><tr><th>名前</th><th>編集</th><th>削除</th></tr></thead>
    <tbody></tbody>
  </table>


  //ここに　追加
  <div id="editForm" style="display:none; margin-top:20px;">
    <h3>編集フォーム</h3>
    名前：<input type="text" id="editInput" />
  </div>
  
  //追加終わり
```


<h4>編集formの div id [editForm]要素　追加[編集画面form作成]</h4>

```js:
<script>
  const nameInput = document.getElementById('nameInput');
  const tbody = document.querySelector('#table tbody');

  //ここに  1行　追加
  const editForm = document.getElementById('editForm');
```
<br>
<h4>編集名前要素読み込み [編集画面form作成]</h4>

```js:
const editForm = document.getElementById('editForm');

// 1行 追加 (divの下)
const editInput = document.getElementById('editInput');
```

<h4>renderTable 編集ボタンが押された時の処理に、編集入力formの名前追加  [編集画面form作成]</h4>

```js:
function renderTable() {
    tbody.innerHTML = '';
    dataArray.forEach((name, index) => {
      ediBtn.addEventListener('click', () => {

      //nameは消す
      nameInput.value = name;
      
      //editInput 入れる
      editInput.value = name;
```

<h4>編集ボタンで編集画面表示 処理つける[編集画面form作成]</h4>

![スクリーンショット 2025-06-16 12.17.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628823/85fc2c13-a0b5-4eb6-b14f-7dad8fc9283b.png)

```js:
function renderTable() {
    tbody.innerHTML = '';
    dataArray.forEach((name, index) => {
      ediBtn.addEventListener('click', () => {
        editIndex = index;
        
        //これは消す
        console.log(name);

        //これ追加
        editForm.style.display = 'block';
```

<h4>削除ボタンイベントの下に、編集画面消す処理つける[編集画面form作成]</h4>

```js:
function renderTable() {
    tbody.innerHTML = '';
    dataArray.forEach((name, index) => {
      delBtn.addEventListener('click', () => {
        dataArray.splice(index, 1);
        renderTable();
        // １行　追加
        editForm.style.display = 'none';
```

<h4>renderTableの下に、編集画面とじるのを書く仕組み</h4>
<p>理屈 : 使い終わったもんを片付ける</p>
<p>テーブル読み込んで編集画面を閉じ、</p>
<p>画面を入力formだけにするのに、こう書くルールだから</p>

<br>
<h3>保存ボタン要素作成　＋ 保存処理 [編集form :保存ボタン作成]</h3>
<h4>保存ボタン htmlに追加[編集form :保存ボタン作成]</h4>

```js:
  <div id="editForm" style="display:none; margin-top:20px;">
    <h3>編集フォーム</h3>
    名前：<input type="text" id="editInput" />
    
    //ここに　追加
    <button id="saveBtn">保存</button>
    
  </div>
```


<h4>保存ボタン要素読み込む</h4>

```js:
<script>
  const editForm = document.getElementById('editForm');
  const editInput = document.getElementById('editInput');
  
  //１行　追加
  const saveBtn = document.getElementById('saveBtn');
```


<h4>保存処理作成[編集form : 保存ボタン作成]</h4>

```js:
 function renderTable() {
    dataArray.forEach((name, index) => {
      addBtn.addEventListener('click', () => {
      });

      //追加ボタンの後に、２行 追加
      saveBtn.addEventListener('click', () => {
      });
      //インデントは、addBtnに合わせる
```

<h4>名前表示し、バリデーションしてから更新[編集form :保存ボタン処理]</h4>

```js:
saveBtn.addEventListener('click', () => {

    //ここに　5行 追加
    const newName = editInput.value.trim();
    if (!newName) {
      alert('名前を入力してください');  ← インデント二個 開ける
      return;
    }
```


<h4>バリデーション成功しdataあったら、更新 [編集form :保存ボタン処理]</h4>

```js:
  saveBtn.addEventListener('click', () => {
    const newName = editInput.value.trim();
    if (!newName) {
      alert('名前を入力してください');
      return;
    }
    
    //ここに追加
    if (editIndex > -1) {
      dataArray[editIndex] = newName;
      editIndex = -1;
    }
    //
```

<h4>更新できたら、テーブル再読み込み [編集form :保存ボタン処理]</h4>

```js:
  saveBtn.addEventListener('click', () => {
    if (editIndex > -1) {
      dataArray[editIndex] = newName
      editIndex = -1;
      
      //１行 追加
      renderTable();
    }
```

<h4>編集画面とじる処理　追加 [編集form :保存ボタン処理]</h4>

```js:
  saveBtn.addEventListener('click', () => {
    if (editIndex > -1) {
      editIndex = -1;
      renderTable();

      //１行 追加
      editForm.style.display = 'none';
    }
```

<br>
<h3>6.キャンセルボタン要素作成　＋ キャンセル処理</h3>
<h4>キャンセルボタンhtmlに追加[編集form : キャンセルボタン追加]</h4>

```js:
<div id="editForm" style="display:none; margin-top:20px;">
    <h3>編集フォーム</h3>
    名前：<input type="text" id="editInput" />
    <button id="saveBtn">保存</button>

    // 保存ボタン下に　追加
    <button id="cancelBtn">キャンセル</button>
  
  </div>
```


<h4>キャンセルボタン要素作成[編集form : キャンセルボタン追加]</h4>

```js:
  <script>
    const editForm = document.getElementById('editForm');
    const editInput = document.getElementById('editInput');
    const saveBtn = document.getElementById('saveBtn');

    //ここに　追加
    const cancelBtn = document.getElementById('cancelBtn');
```

<h4>保存ボタン下に、キャンセルボタン処理　追加[編集form : キャンセルボタン追加]</h4>

```js:
  function renderTable() {
    dataArray.forEach((name, index) => {
      addBtn.addEventListener('click', () => {
      });
      saveBtn.addEventListener('click', () => {
      });

      //ここに　追加
      cancelBtn.addEventListener('click', () => {
      });
```


<h4>編集formでキャンセルボタン使うから、編集のID持ってくる[編集form : キャンセルボタン追加]</h4>

```js:
    cancelBtn.addEventListener('click', () => {
      
      //１行　追加
      editIndex = -1;
    });
```


<h4>編集画面を閉じる[編集form : キャンセルボタン追加]</h4>

```js:
    cancelBtn.addEventListener('click', () => {
      // １行　追加
     editForm.style.display = 'none'; // 編集フォーム閉じる

     editIndex = -1;
    });
```