LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k8p4tw(k1a8jm)

テーブルCRUD 手順書

Last updated at Posted at 2025-06-16

目次

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

      • 1.入力formとボタンを追加

<!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>

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

配列　追加

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

2.追加ボタン作成

ボタンのイベントリスナー追加

let dataArray = [];
//ここに　追加
addBtn.addEventListener('click', function () {
}

イベントリスナーに、クリックされた、と表示

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

３.テーブル表示

テーブル要素表示　追加

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

テーブル表示させる htmlに追加

  <button id="addBtn">追加</button>

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

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

function renderTable() {
}

// ここに追加
addBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();
  console.log(name); // ← デバッグ用
  dataArray.push(name);
  renderTable(); // ← 表示
});

3.名前のバリデーション　入れる

追加ボタンが押され名前表示する後に、バリデーション

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

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

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

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

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

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


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

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

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に合わせる

編集ボタン要素 追加

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

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

dataArray.forEach((name, index) => {

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

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

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

編集ボタンのイベントリスナー追加

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

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

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

テーブル表示方法を変える

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

ここまでの結果画面

スクリーンショット 2025-06-15 18.10.55.png

削除ボタン追加

削除ボタン　要素取得

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

      //ここに追加
      
      });
変更後
   tbody.appendChild(tr);
   const tdDel = document.createElement('td');
   const delBtn = document.createElement('button');
   delBtn.textContent = '削除';
   });

削除ボタンが押された処理　追加

delBtn.textContent = '削除';

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

tbody.appendChild(tr)を修正

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

編集画面form 作成

編集画面form htmlに追加[編集form作成]

<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>
  
  //追加終わり

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

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

  //ここに  1行　追加
  const editForm = document.getElementById('editForm');

編集名前要素読み込み [編集画面form作成]

const editForm = document.getElementById('editForm');

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

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

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

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

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

スクリーンショット 2025-06-16 12.17.11.png

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

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

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

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

renderTableの下に、編集画面とじるのを書く仕組み

理屈 : 使い終わったもんを片付ける

テーブル読み込んで編集画面を閉じ、

画面を入力formだけにするのに、こう書くルールだから


保存ボタン要素作成　＋ 保存処理 [編集form :保存ボタン作成]

保存ボタン htmlに追加[編集form :保存ボタン作成]

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

保存ボタン要素読み込む

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

保存処理作成[編集form : 保存ボタン作成]

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

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

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

saveBtn.addEventListener('click', () => {

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

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

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

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

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

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

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

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

6.キャンセルボタン要素作成　＋ キャンセル処理

キャンセルボタンhtmlに追加[編集form : キャンセルボタン追加]

<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>

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

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

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

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

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

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

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

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

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

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

     editIndex = -1;
    });
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?