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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

解決済

JavaScriptにて、複数削除と自動計算がしたい。

Lorraine
Lorraine

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

3回答

0評価

0クリップ

143閲覧

投稿2021/11/09 13:07

編集2021/11/11 01:44

前提・実現したいこと

1.JavaScriptにて追加された行に対し、同要素をもつ4行の内、何れかの入力欄に数値が入力された後にその行と同一の行の対象の項目に計算結果を反映したい。
*cloneされ行が4行の状態のものを本投稿では記載しております。追加ボタンの動作は本影響外となります。また、動作経緯の為sampleには追加の明記もあります。

2.行削除を行削除ボタンが押された1行のみでなくボタンが押された1行と隣接している行も含め2行削除したい。
※該当ソース箇所(ueとshita)
sampleは以下になります。
https://codepen.io/sougoukanri/pen/GRvGvqW

前提:元画面は2行のみ表示された画面であり、本質問にあたり動作状問題となる画面はclone後の4行になった際の事象になります為本投稿は意図的に4行の状態にしております。

発生している問題・エラーメッセージ

1.cloneして、行を追加している為、自動計算に関しては、正しく反映されない。
1行目は反映される。
問題:行追加後、3行目にて同様の要素箇所では数値を入力してもその行には反映されない。

2.parents('tr').removeであるため、対象1行のみでしか削除されない。

該当のソースコード

html5

<tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody"> <tr id="ue"> <td><input id="anohi" name="anohimita" value=""> </td> <td> <select class="changeList"> <option>A</option> <option>B</option> <option>C</option> </select> </td> <td id="darenogare">A</td> <td> <button class="upList">⬆️上へ</button>  <button class="downList">⬇️下へ</button> </td> <td> </td> </tr> <tr id="shita"> <td><input> </td> <td> <select class="changeList"> <option>A</option> <option>B</option> <option>C</option> </select> </td> <td>A</td> <td> <button class="upList">⬆️上へ</button>  <button class="downList">⬇️下へ</button> </td> <td> <button id="hogedelete" type="button" class="hohodelete">行削除</button> </td> </tr> <tr id="ue"> <td><input id="anohi" name="anohimita" value=""> </td> <td> <select class="changeList"> <option>A</option> <option>B</option> <option>C</option> </select> </td> <td id="darenogare">A</td> <td> <button class="upList">⬆️上へ</button>  <button class="downList">⬇️下へ</button> </td> <td> </td>

長い為2つに分けます。

html5

<td> </td> </tr> <tr id="shita"> <td><input> </td> <td> <select class="changeList"> <option>A</option> <option>B</option> <option>C</option> </select> </td> <td>A</td> <td> <button class="upList">⬆️上へ</button>  <button class="downList">⬇️下へ</button> </td> <td> <button id="hogedelete" type="button" class="hohodelete">行削除</button> </td> </tr>

js

//追加 $("#add").on("click", function () { $("#p2146-2-table > tbody > tr ").clone(true).appendTo($("#p2146-2-tbody")); }); //削除 $(document).on("click", ".hohodelete", function () { $(this).parents("tr").remove(); }); $(function () { var value = 200; var tagInputh = $("#anohi"); // 入力対象のinputタグID名 var tagOutput = $("#darenogare"); // 出力対象のinputタグID名 tagInputh.on("change", function () { var str = $(this).val(); var num = Number(str.replace(/[^0-9]/g, "")); // 整数以外の文字列を削除 $(this).val(num); if (num != 0) { //計算のみ var price = num * value; tagOutput.val(price); $("#darenogare").text(price); } }); });

試したこと

grop化、clone時のid振り分け

補足情報(FW/ツールのバージョンなど)

HTML5
CSS3
JavaScript
jQuery

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

ku__ra__ge

2021/11/09 14:32 編集

質問文の内容から考えると、質問者さんはボタンを押すとなんらかの動作をすると想定しているようですが、提示されたコードをブラウザで表示させてボタンを押しても何も起きません。 質問に記載した問題が再現するコードを提示してください。
Lorraine

2021/11/09 17:51

ご指摘どうも有難うございます。 ブラウザ上で動作し、問題箇所の事象が見れるものへと修正いたしました。
yambejp

2021/11/10 00:28

自動計算の根拠もよくわからないので もっと簡単な例に絞ったほうがよいでしょう
Lhankor_Mhy

2021/11/10 00:48

「押された1行と隣接している行も含め2行削除」とのことですが、隣接行は上下あるはずなので「3行」の間違いだと読みましたが、よろしいですか?
Lorraine

2021/11/10 00:53

失礼しました、曖昧表現でした、隣接行すべてが対象ではなく、あくまでtr行のue,shitaの2行を1セットとして削除したい意になります。
Lhankor_Mhy

2021/11/10 00:55

「同要素を持つ」とはなんですか? 一般的にDOMはツリー構造なので、ある同じ要素を複数の要素が持つことはないです。おそらく、同じ値とかそういう意味だと思いますが、そうだとした場合、どの値を比べたいのでしょうか。
Lhankor_Mhy

2021/11/10 00:57

「対象の項目」とは具体的には何ですか? #darenogare ですか?

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。