名前とニックネームを入力して追加ボタンを押すと、入力したデータが表に出力されるようにしました。
その際に、出力されたデータの行の右端に削除ボタンも一緒に出力されるようにしたいのです。(削除ボタンを押すと追加したデータを削除出来るよう)
入力フォームの中にボタンを表示させることは出来るのですが、表の中にボタンを出力するにはどうすればいいんでしょうか？

html

<body>
        <div class="base container">
          <div class="row">
            <h1>アカウント登録</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
                    </div>

                </form>
                <div id="tuikaMoto">

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div id="overLay">
      </div>    
      <table id="tourokuTable" table align = "center" table style = margin-top:50px>
        <tr>
            <th id="tableName">名前</th>
            <th id="tableNickname">ニックネーム</th>           
        </tr>
     </table>

 <script>
            let result = document.getElementById("result");
            let tuikanumber = 0;
            let tuikaBtn = document.getElementById("tuikaBtn");
                tuikaBtn.addEventListener('click',function() {
            let namae = document.getElementById("namae");
            let nickname = document.getElementById("nickname");
              
            
            if(namae.value == "" || nickname.value == "")return;
            
            let kakunin = window.confirm(
              namae.value + "さん" + nickname.value + "を登録します。よろしいですか？"
              );
           
            if(kakunin) {
              tuikanumber++;
              
              window.alert(
              namae.value + "さん" + nickname.value + "にて登録しました。"
              ); 
              } else {
              return;
              }
            
            if(tuikanumber >= 3) {
              tuikaBtn.style.visibility = "hidden";            
            }
            
              let formobject = document.getElementById("form-area");
              let tableobject = document.getElementById("tourokuTable");
              let tr = "<tr>";
              tr += "<td>" + formobject.namae.value + "</td>";
              tr += "<td>" + formobject.nickname.value + "</td>";
              tr += "</tr>";
              tableobject.insertAdjacentHTML( "beforeend", tr );

            });

行動規範の内容に同意します

回答2件

ベストアンサー

調整版

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const tuikaBtn = document.querySelector("#tuikaBtn");
4  const formobject = document.querySelector("#form-area");
5  const tableobject = document.querySelector("#tourokuTable tbody");
6  const namae = document.querySelector("#namae");
7  const nickname = document.querySelector("#nickname");
8  const tuikaBtnView=()=>{
9    const tuikanumber=tableobject.querySelectorAll('tr').length;
10    tuikaBtn.style.visibility=tuikanumber>=3?"hidden":"";
11  }
12  tuikaBtn.addEventListener('click',()=>{
13    if(namae.value == "" || nickname.value == "") return　false;
14    let kakunin = confirm(`${namae.value}さん${nickname.value}を登録します。よろしいですか？`);
15    if(!kakunin) return false;
16    alert(`${namae.value}さん${nickname.value}にて登録しました。`);
17    let tr = "<tr>";
18    tr += `<td>${formobject.namae.value}</td>`;
19    tr += `<td>${formobject.nickname.value}</td>`;
20    tr += `<td><input type="button" value="del" class="del"</td>`;
21    tr += `</tr>`;
22    tableobject.insertAdjacentHTML( "beforeend", tr );
23    tuikaBtnView();
24  });
25  document.addEventListener('click',e=>{
26    const t=e.target;
27    if(t.matches('.del')){
28      t.closest('tr').remove();
29      tuikaBtnView();
30    }
31  });
32});
33</script>
34
35<form id="form-area" method="post">
36<div class="form-group">
37<div class="input-group">
38<input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
39</div>
40</div>
41<div class="form-group">
42<div class="input-group">
43<input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
44</div>
45</div>
46<div class="form-group">
47<input id="tuikaBtn" type="button" name="touroku" value="追加">
48</div>
49</form>
50
51<table id="tourokuTable" >
52<thead>
53<tr>
54<th id="tableName">名前</th>
55<th id="tableNickname">ニックネーム</th>           
56<th>&nbsp;</th>
57</tr>
58</thead>
59<tbody>
60</tbody>
61</table>

参考

UI的にはチェックしてまとめて削除のほうが楽かもしれません

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const tuikaBtn = document.querySelector("#tuikaBtn");
4  const sakujoBtn = document.querySelector("#sakujoBtn");
5  const formobject = document.querySelector("#form-area");
6  const tableobject = document.querySelector("#tourokuTable tbody");
7  const namae = document.querySelector("#namae");
8  const nickname = document.querySelector("#nickname");
9  const tuikaBtnView=()=>{
10    const tuikanumber=tableobject.querySelectorAll('tr').length;
11    tuikaBtn.toggleAttribute("hidden",tuikanumber>=3);
12  }
13  tuikaBtn.addEventListener('click',()=>{
14    if(namae.value == "" || nickname.value == "") return　false;
15    let kakunin = confirm(`${namae.value}さん${nickname.value}を登録します。よろしいですか？`);
16    if(!kakunin) return false;
17    alert(`${namae.value}さん${nickname.value}にて登録しました。`);
18    let tr = "<tr>";
19    tr += `<td><input type="checkbox" class="del"></td>`;
20    tr += `<td>${formobject.namae.value}</td>`;
21    tr += `<td>${formobject.nickname.value}</td>`;
22    tr += `</tr>`;
23    tableobject.insertAdjacentHTML( "beforeend", tr );
24    tuikaBtnView();
25  });
26  sakujoBtn.addEventListener('click',()=>{
27    let sakujo = document.querySelectorAll('.del:checked');
28    if(sakujo.length==0){
29      alert('チェックして!');
30      return false;
31    }
32    let kakunin = confirm(`チェックしたデータを削除ますか？`);
33    if(kakunin) sakujo.forEach(x=>x.closest('tr').remove());
34    tuikaBtnView();
35  });
36});
37</script>
38
39<form id="form-area" method="post">
40<div class="form-group">
41<div class="input-group">
42<input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
43</div>
44</div>
45<div class="form-group">
46<div class="input-group">
47<input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
48</div>
49</div>
50<div class="form-group">
51<input id="tuikaBtn" type="button" name="touroku" value="追加">
52<input id="sakujoBtn" type="button" name="sakujo" value="削除">
53</div>
54</form>
55
56<table id="tourokuTable" >
57<thead>
58<tr>
59<th>削除</th>
60<th id="tableName">名前</th>
61<th id="tableNickname">ニックネーム</th>           
62</tr>
63</thead>
64<tbody>
65</tbody>
66</table>

投稿2022/10/25 00:54

編集2022/10/26 00:49

yambejp

総合スコア114843

Hello.world

2022/10/25 22:42

回答ありがとうございます！追加ボタンを押すと削除ボタンが行の右端に表示されるようにしたいのですが、上記のコードだと最初から削除ボタンが表示されていると思います。その場合どのように変更すればいいのでしょうか？

yambejp

2022/10/26 00:21

チェックボックス方式でよいということでしょうか？

Hello.world

2022/10/26 00:38

チェックボックス式ではない方でお願いします！

yambejp

2022/10/26 00:51

とりあえず非チェックボックスの方を調整しておきましたそちらの方は「最初から削除ボタンが表示されている」という指摘は正しくないと思いますが？

Hello.world

2022/10/26 23:00

tr += `<td><input type="button" value="del" class="del"</td>`; ありがとうございます！上記のコードで無事表の右端に削除ボタンを作ることは出来たのですが、仮に let sakujoBtn = document.createElement('input'); sakujoBtn.type = 'button'; sakujoBtn.id = 'sakujo'; sakujoBtn.value = '削除'; sakujoBtn.className = 'btn'; tableobject.appendChild(sakujoBtn); この記述でボタンを作った場合、このボタンをtdに配置することは可能なんでしょうか？

yambejp

2022/10/28 00:59

可能ですが、trやtdをテキストからの流し込みでやっているのにボタンだけDOMなのはあまり感心できません

行動規範の内容に同意します

入力フォームの中だろうと表の中だろうと同じです。
「HTMLの要素として配置」
あとは「削除対象の情報」と「削除イベントの付与」を間違いなくすること。

・createElement()で要素作って配置 or HTML文字列を配置
・↑上記いずれにしても「行番号」などその行固定の情報を要件にあわせて適宜持たせておく（IDとかdata属性とか）
・配置するときにそのボタンに対して逐一イベント付与
・そのイベントの処理に、行固定の情報を取得して削除（これがtr毎削除なのか、非表示なのか、要素をどう操作するかでデータの持たせ方も変わってくる）

投稿2022/10/24 23:33

編集2022/10/24 23:43

m.ts10806

総合スコア80850

Hello.world

2022/10/25 22:38

createElement()で削除ボタンを配置する所までは出来たのですが、行の右端にボタンを配置するにはどう指定すればいいのでしょうか？また、削除ボタンを押すとそのボタンがある行全部を削除する方法が調べても分かりませんでした。 let sakujoBtn = document.createElement('input'); sakujoBtn.type = 'button'; sakujoBtn.id = 'sakujo'; sakujoBtn.value = '削除'; sakujoBtn.className = 'btn'; tableobject.appendChild(sakujoBtn); sakujoBtn.addEventListener('click',function() { });

m.ts10806

2022/10/25 22:56

今の実装だとhtml文字列そのまま入れたほうが楽です。 createElement使うにしても「行の右端に」というレイアウト観点ではなく、「表の行末のtd内に」という実装観点にする必要があります。削除についも同様。回答にある内容で可能ですが、実装観点で考えないと手は進まないと思います。

Hello.world

2022/10/26 23:08

td内に記述することで無事配置することが出来ました！ありがとうございます！

yambejp

2022/10/28 00:58 編集

（回答箇所間違いのため削除）

行動規範の内容に同意します

あなたの回答