質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

追加ボタンを押すと作成される表の中に削除ボタンを出力したい

Hello.world
Hello.world

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

0クリップ

346閲覧

投稿2022/10/24 23:06

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

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>

JS

<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 ); });

イメージ説明

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

1

ベストアンサー

調整版

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

総合スコア108937

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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なのはあまり感心できません

0

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

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

投稿2022/10/24 23:33

編集2022/10/24 23:43
m.ts10806

総合スコア79935

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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

(回答箇所間違いのため削除)

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。