前提・実現したいこと
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
まだ回答がついていません
会員登録して回答してみよう