Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
【したいこと】
（モーダルウィンドウの）テーブル横のラジオボタンを選択して[確定]ボタンを押すと、
０円の金額のところが再計算されて表示されるようにしたいのですが、０円のまま変わりません。
【わからないこと】
console.logでどこが動いていないか確認したところ、
おそらくinput[type="radio]のchangeが効いていないようです。
どのように組むと、反映されるようになりますか。
追記：
テーブルに同じデータが2回書き込まれているのですが、
どこに問題があるのでしょうか？
（例）
データ１ データAA データBB
あああ あああ あああ
上のように表示されるのが正解として、
データ１ データAA データBB
あああ あああ あああ
データ１ データAA データBB
あああ あああ あああ
と２回同じデータが出力されます。
【補足】
金額は、
行：ラジオボタンの選択行
列：４列目
を読むようにしております
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="robots" content="noindex,nofollow"> 6 7 <!-- ビューポートの設定 --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 10 <!-- スタイルシートの読み込み --> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 12 13 <title>デモ</title> 14 15 <style> 16 html{ 17 font-size:20px; 18 } 19 body{ 20 margin:30px; 21 } 22 main{ 23 background-color:#f8f8f8; 24 padding:20px; 25 } 26 h2{ 27 font-size:22px; 28 } 29 #modal-content{ 30 max-height: calc(100vh - 1.5em); 31 32 width:50%; 33 margin:1.5em auto 0; 34 padding:10px 20px; 35 border:2px solid #aaa; 36 background:#fff; 37 z-index:2; 38 position:fixed; 39 display:none; 40 overflow: auto; 41 } 42 43 .button-link{ 44 margin-left : 0; 45 text-align:center; 46 -moz-border-radius: 5px; 47 -webkit-border-radius: 5px; 48 border-radius: 5px; 49 } 50 .closestyle{ 51 font-size:20px; 52 margin-left : 500px; 53 text-align:center; 54 -moz-border-radius: 5px; 55 -webkit-border-radius: 5px; 56 border-radius: 5px; 57 } 58 59 .closestyle:hover, 60 .button-link:hover{ 61 cursor:pointer; 62 color:#f00; 63 } 64 65 #modal-overlay{ 66 z-index:1; 67 display:none; 68 position:fixed; 69 top:0; 70 left:0; 71 width:100%; 72 height:120%; 73 background-color:rgba(0,0,0,0.75); 74 } 75 td{ 76 padding:5px; 77 } 78 select,input,textarea{ 79 font-family : inherit; 80 font-size:20px; 81 82 83 padding:3px; 84 border:1px solid black; 85 vertical-align:middle; 86 } 87 #subresult1:after, 88 #subresult3:after, 89 #gassan:after{ 90 content:"円"; 91 } 92 </style> 93</head> 94<body> 95 96 97 <main> 98 <h1 style="color:black;">ＤＥＭＯ</h1> 99 100 <HR style="margin: 1em 0 ;"> 101 102 <h2>データ</h2> 103 104 <!-- ここからモーダルウィンドウ --> 105 <!-- --> 106 <!-- モーダルウィンドウのコンテンツ開始 --> 107 <!-- --> 108 <div id="modal-content"> 109 <p><a id="modal-close1" class="closestyle">[閉じる]</a></p> 110 <form name="childfrm" action="" method="post"> 111 <input id="btn4444" type="button" value="確定"> 112 </form><br> 113 <input type="text" id="search" style="width:200px;height:30px;vertical-align:middle;"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2"> 114 115 116 <p id="kekka" style="display:none;height:50px;width:300px;text-align:center;"></p> 117 <br><br> 118 119 120 <table id="result" style="border-spacing:0;" cellpadding="0" cellspacing="0" border="1" class="tbl"> 121 <tbody> 122 <thead><th>✔︎</th><th>データ１</th><th>データ２</th><th>データ３</th><th>データ４</th></thead> 123 <tr> 124 <th></th> 125 <td></td> 126 </tr> 127 </tbody> 128 </table> 129 130 131 132 <p><a id="modal-close2" class="closestyle">[閉じる]</a></p><br> 133 </div> 134 <!-- --> 135 <!-- モーダルウィンドウのコンテンツ終了 --> 136 <!-- --> 137 138 <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p> 139 <!-- ここまでモーダルウィンドウ --> 140 141 142 <p id="subresult3">0</p> 143 144 145 146 <HR style="margin: 2em 0 ;"> 147 148 <!--<input id="button_gassan" type="button" value="[合算]" style="width:200px;padding:3px;"> --> 149 150 <h2>総計</h2> 151 <p id="gassan">0</p> 152 153 </main> 154 155 156 157 <script> 158 159 jQuery(function($){ 160 161 //モーダルウィンドウを出現させるクリックイベント 162 $("#modal-open").click(function(){ 163 164 //キーボード操作などにより、オーバーレイが多重起動するのを防止する 165 $( this ).blur(); //ボタンからフォーカスを外す 166 if( $( "#modal-overlay" )[0]) return false; //新しくモーダルウィンドウを起動しない (防止策1) 167 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) 168 169 //オーバーレイを出現させる 170 $( "body" ).append( '<div id="modal-overlay"></div>'); 171 $( "#modal-overlay" ).fadeIn( "slow" ); 172 173 //コンテンツをセンタリングする 174 centeringModalSyncer(); 175 176 //コンテンツをフェードインする 177 $( "#modal-content" ).fadeIn( "slow" ); 178 179 //[#modal-overlay]、または[#modal-close1]や2,btn4444をクリックしたら… 180 $( "#modal-overlay,#modal-close1,#modal-close2,#btn4444" ).unbind().click( function(){ 181 //[#modal-content]と[#modal-overlay]をフェードアウトした後に… 182 $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ 183 //[#modal-overlay]を削除する 184 $('#modal-overlay').remove(); 185 }); 186 }); 187 }); 188 189 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する 190 $( window ).resize( centeringModalSyncer); 191 192 //センタリングを実行する関数 193 function centeringModalSyncer() { 194 195 //画面(ウィンドウ)の幅、高さを取得 196 var w = $( window ).width(); 197 var h = $( window ).height(); 198 199 // コンテンツ(#modal-content)の幅、高さを取得 200 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 201 // var cw = $( "#modal-content" ).outerWidth( {margin:true} ); 202 // var ch = $( "#modal-content" ).outerHeight( {margin:true} ); 203 var cw = $( "#modal-content" ).outerWidth(); 204 var ch = $( "#modal-content" ).outerHeight(); 205 206 //センタリングを実行する 207 $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"}); 208 } 209 }); 210 211 //TableのHTMLを初期化 212 $("table.tbl tbody").html(""); 213 214 //TableのHTMLを生成 215 $.getJSON("table-json.json", function(data){ 216 $(data.release).each(function(){ 217 $('<tr>'+ 218 '<th><input type="radio" name="hoge" class="hoge" value="1" /></th>'+ 219 '<td class="label">' + this.dt1 + '</td>' + 220 '<td><label style="display:none;">'+this.dt1+this.dt2+'</label>'+ this.dt2 + '</td>' + 221 '<td>'+this.ps1 + '</td>' + 222 '<td>'+ this.ps2 + '</td>'+ 223 '</tr>').appendTo('table.tbl tbody'); 224 }) 225 }) 226 227 228 //計算 229 $('#button').on("click",function(){ 230 var re = new RegExp($('#search').val()); 231 $('#result tbody tr').each(function(){ 232 var txt = $(this).find("td:eq(0)").html(); 233 var txt2 = $(this).find("td:eq(1)").html(); 234 235 236 if(txt.match(re) == null && txt2.match(re) == null){ 237 $(this).css('display', 'none'); 238 239 }else{ 240 $(this).css('display', 'table-row'); 241 } 242 }); 243 }); 244 245 $('#button2').on("click",function(){ 246 $('#search').val(''); 247 $('#result tr').css('display', 'table-row'); 248 }); 249 250 251 $(document).on("change", 'input[type="radio"]', function(){ 252 //選択したvalue値を変数に格納 253 window.line = $(this).parents('tr').index(); 254 }); 255 256 257 //[確定]ボタン 258 $(document).on("click", '#btn4444', function(){ 259 window.changeValue=4; 260 261 gassanFnc(); 262 }); 263 264 265 //合算処理function 266 function gassanFnc() { 267 function TableSelect (table, x = 1, y = 1) { 268 //let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`; 269 let q = `table tr:nth-of-type(${y}) td:nth-of-type(${x})`; 270 271 return $('table').find($(q)).text(); 272 //return table.querySelector (q).textContent; 273 } 274 if(window.line==undefined){ 275 }else{ 276 //5が列４ 277 //console.log (TableSelect(document.querySelector('table'), 5, window.line+1)); 278 if(window.changeValue==undefined){ 279 window.changeValue = 1; 280 }else{ 281 //4列目をよむ 282 window.Calc1=TableSelect($('table'), window.changeValue, window.line+1); 283 $("#subresult3").text(window.Calc1); 284 $("#gassan").text(window.Calc1); 285 286 //console.log(window.changeValue); 287 //console.log(window.line); 288 console.log(window.Calc1); 289 290 } 291 } 292 } 293 </script> 294 295 296</body> 297</html>
json
1{"release": [ 2 3 { 4 "dt1": "地域A","dt2": "てすとAA","ps1": "300","ps2": "400" 5 }, 6 { 7 "dt1": "地域A","dt2": "てすとAB","ps1": "1000","ps2": "400" 8 }, 9 { 10 "dt1": "地域B","dt2": "てすとBB","ps1": "10000","ps2": "540" 11 }, 12 { 13 "dt1": "地域C","dt2": "てすとCB","ps1": "1000","ps2": "50" 14 } 15 16 17]}
回答1件
0
ベストアンサー
あまりインデントが整理されていなくて、ざっとしか読んでませんが動的に要素を生成した場合、「生成した要素」に対してイベントを別途付与する必要があります。
jQueryからだとdocumentからイベント付与することで対応してくれます。
動的に生成したDOM要素に対してjQueryでイベントを設定する場合
蛇足：
querySelectorとaddEventListenerが混じってますが、jQuery導入するなら記述は統一したほうが良いです。
投稿2020/09/25 06:56
総合スコア80850
お返事、ご指摘ありがとうございます。
動的に生成しているために、追加された、ラジオボタンがうまく機能していなかったのですね。
記載のサイトを参考に、コードを書き換えたところ、
radioボタンが機能しました！（コンソールにて、確認）
やはり、記述を統一化した方がいいのですね。
javascriptからjqueryへ置換をするにあたり、
統一できた部分と、自分の現在の技量ではうまくできず、
動かなくなった部分は、そのまま残しておりました。
まだ残っている部分があるかもしれませんが、わかる範囲で、
jqueryへコードを書き換えたのですが、数値が表示されません。
あとは細かくデバッグしてくしかないと思います。
コンソール確認の仕方をご存知であれば解決は近いと思います。
ありがとうございます！
コンソールで確認していくと、
おそらく、
「return $('q').find('table').textContent」の部分がうまく書き換えられていないのかと思うのですが、
「return table.querySelector (q).textContent;」はjqueryだとどのように表記するのでしょうか？
クォートで囲むとそういう文字列になります。
使いたいのは変数ですよね。
そうです。
そのために、対応する行と列の値を読んで、表示したいのですが‥
あれ、伝わってなかった。
$('q')
↓
$(q)
セレクタ的には'q'だと「qというタグ」になりますよ。CSSと同じです。
それにJavaScriptのquerySelector の引数と jQueryの$()は指定方法同じです。「セレクタ」です。
タグ扱いにしてしまっていたのですね＾＾；
return $(q).find('table').textContent;
でしてみたのですが、コンソールでundefinedで、データ無いとなり、
うまく反映しませんでした。
そもそもfindしたいのは、$qなので、
return $('table').find($(q)).textContentですかね・・・
と、するくらいなら、tableの中にtrって大抵あるものなので
let q = `table tr:nth-of-type(${y}) td:nth-of-type(${x})`;
$(q)
で良いと思いますし（本当にそこを指せるなら）
jQueryで統一する場合、.textContentではなく.text()ですね。
ありがとうございます！
数字が出ました！ただ、400のところが400400と表示されました。謎です・・・
<thead>が<tbody>の中に入ってたことが原因かもです！修正したらなおりました！
あなたの回答
tips
プレビュー
