【javascript】シンプルなtableの動的行追加・削除（ボタンクリックで行追加・削除）

やりたいこと

tableを、ボタンクリックで行追加、削除する

●次の記事

【javascript】シンプルな動的tableのinputの値取得

完成形、動作

See the Pen table-clickadd/clickdel by Hirofumi Sato (@hfmst) on CodePen.

ざっくり解説

行追加

1. tableとthだけ用意
2. createElementで、追加するtr(行要素）を作っておく
3. 繰り返しで「td作る→tdに何か入れる→trにどんどん追加
4. 3で作ったtrをtdに入れる

削除

1. 最新のtableの最終行取得
2. deleteRowで削除

コード

index.html

<!--ボタン配置--> 
  <div>
    <button onclick="add()">行追加</button>
    <button onclick="del()">行削除</button>
  </div>

<!--table作成とヘッダーだけ先に-->
<table id="tbl" border="1" style="border-collapse:collapse;">
  <tr>
    <th>名前</th>
    <th>趣味</th>
    <th>好きなもの</th>
  </tr>
</table>

js.html

//繰り返し使うtableだけ先に定数に格納
const tbl = document.getElementById("tbl");


//行追加
function add(){

  //空の行要素を先に作成tr
  let tr = document.createElement("tr"); 

  //以下、繰り返し処理 
  for(let i=0;i<3;i++){
    let td = document.createElement("td");      //新しいtd要素を作って変数tdに格納
  　let inp = document.createElement("input");  //tdに何か追加。ここは例としてinput
  　td.appendChild(inp);        //tdにinpを追加
    tr.appendChild(td);         //trにtdを追加
  }

  //完成したtrをtableに追加
  tbl.appendChild(tr);  
}

//以下、末尾行削除処理
function del(){

  let rw = tbl.rows.length;//行数取得
  tbl.deleteRow(rw-1);//最終行を指定して削除

}