Q&A
生成した表のプルダウンで選択した回答を抽出したい
【やりたい事の説明】
この様な表を作りました。圃場は４つあります。
この表は農薬の種類の数を選択する表です。
仮にAの圃場で殺菌剤を2
Bの圃場で殺虫剤を2と選択します。
↓
選択した後、処理ボタンを押すと以下の表が生成されます。
そして生成された表のプルダウンで選択した値を取得したいです。
【やった事】
この様に表全てのテキストを取得した所、選択した物ではなくプルダウンの値全てを取得してしまいました。
javascript
1for (let row of table.rows) { 2 for(let cell of row.cells){ 3 console.log(cell.innerText); 4 }
コードは以下のようになります。
html,Javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>サンプル</title> 6</head> 7<body> 8 9 10<p></p> 11<label for="kategori">農薬の種類を選択し、【OK】を押して下さい。</label> 12<p><span id="span3"></span></p> 13<form name="form3"> 14<p></p> 15<table border="1"> 16 17 18<tr> 19<td></td> 20<th>A</th> 21<th>B</th> 22<th>C</th> 23<th>D</th> 24<tr> 25 26<tr> 27<td>殺菌剤</td> 28<th> 29<select id="sakkin_A"> 30<option value="0">0</option> 31</select> 32</th> 33<th> 34<select id="sakkin_B"> 35<option value="0">0</option> 36</select> 37</th> 38<th> 39<select id="sakkin_C"> 40<option value="0">0</option> 41</select> 42</th> 43<th> 44<select id="sakkin_D"> 45<option value="0">0</option> 46</select> 47</th> 48</tr> 49 50 51<tr> 52<td>殺虫剤</td> 53<th> 54<select id="saccyu_A"> 55<option value="0">0</option> 56</select> 57</th> 58<th> 59<select id="saccyu_B"> 60<option value="0">0</option> 61</select> 62</th> 63<th> 64<select id="saccyu_C"> 65<option value="0">0</option> 66</select> 67</th> 68<th> 69<select id="saccyu_D"> 70<option value="0">0</option> 71</select> 72</th> 73</tr> 74 75 76<tr> 77<td>展着剤</td> 78<th> 79<select id="tenchaku_A"> 80<option value="0">0</option> 81</select> 82</th> 83<th> 84<select id="tenchaku_B"> 85<option value="0">0</option> 86</select> 87</th> 88<th> 89<select id="tenchaku_C"> 90<option value="0">0</option> 91</select> 92</th> 93<th> 94<select id="tenchaku_D"> 95<option value="0">0</option> 96</select> 97</th> 98</tr> 99 100 101<tr> 102<td>天敵</td> 103<th> 104<select id="tenteki_A"> 105<option value="0">0</option> 106</select> 107</th> 108<th> 109<select id="tenteki_B"> 110<option value="0">0</option> 111</select> 112</th> 113<th> 114<select id="tenteki_C"> 115<option value="0">0</option> 116</select> 117</th> 118<th> 119<select id="tenteki_D"> 120<option value="0">0</option> 121</select> 122</th> 123</tr> 124 125 126<tr> 127<td>その他</td> 128<th> 129<select id="sonota_A"> 130<option value="0">0</option> 131</select> 132</th> 133<th> 134<select id="sonota_B"> 135<option value="0">0</option> 136</select> 137</th> 138<th> 139<select id="sonota_C"> 140<option value="0">0</option> 141</select> 142</th> 143<th> 144<select id="sonota_D"> 145<option value="0">0</option> 146</select> 147</th> 148</tr> 149 150</table> 151</form> 152<p></p> 153 154<div> 155<input type="button" value="OK" onclick="clickBtn1()"/> 156</div> 157<p> 158<table border="1" id="targetTable"> 159<thead> 160<tr> 161<td>圃場名</td> 162<td>カテゴリ</td> 163<td>農薬名</td> 164<td>総量</td> 165<td>単位</td> 166</tr> 167</thead> 168<tbody> 169<tr> 170<td>（例）</td> 171<td>殺菌剤</td> 172<td>アフェットフロアブル</td> 173<td>600</td> 174<td>g</td> 175</tr> 176<tbody> 177</table> 178</p> 179 180<p> 181<div> 182<input type="button" value="OK" onclick="clickBtn2()"/> 183</div> 184</p> 185 186<script> 187function clickBtn2(){ 188let table = document.getElementById('targetTable'); 189 190for (let row of table.rows) { 191 for(let cell of row.cells){ 192 console.log(row,cell); 193 194 } 195} 196var selected = $("#select01").val(); 197var selectedValue = selected.val(); 198var selectedText = selected.text(); 199console.log(selectedValue); 200 201} 202</script> 203 204 205<script> 206 function clickBtn1(){ 207/////////////////////////////////////////////////////////////////////////////// 208//カテゴリと圃場の抽出 209//A圃場 210 const sakkin_A = document.form3.sakkin_A; 211 // 値(数値)を取得 212 const num3 = sakkin_A.selectedIndex; 213 // 値(数値)から値(value値)を取得 214 const str3 = sakkin_A.options[num3].value; 215 216 const saccyu_A = document.form3.saccyu_A; 217 // 値(数値)を取得 218 const num4 = saccyu_A.selectedIndex; 219 // 値(数値)から値(value値)を取得 220 const str4 = saccyu_A.options[num4].value; 221 222 const tenchaku_A = document.form3.tenchaku_A; 223 // 値(数値)を取得 224 const num5 = tenchaku_A.selectedIndex; 225 // 値(数値)から値(value値)を取得 226 const str5 = tenchaku_A.options[num5].value; 227 228 const tenteki_A = document.form3.tenteki_A; 229 // 値(数値)を取得 230 const num6 = tenteki_A.selectedIndex; 231 // 値(数値)から値(value値)を取得 232 const str6 = tenteki_A.options[num6].value; 233 234 const sonota_A = document.form3.sonota_A; 235 // 値(数値)を取得 236 const num7 = sonota_A.selectedIndex; 237 // 値(数値)から値(value値)を取得 238 const str7 = sonota_A.options[num7].value; 239 240 241//B圃場 242 const sakkin_B = document.form3.sakkin_B; 243 // 値(数値)を取得 244 const num8 = sakkin_B.selectedIndex; 245 // 値(数値)から値(value値)を取得 246 const str8 = sakkin_B.options[num8].value; 247 248 const saccyu_B = document.form3.saccyu_B; 249 // 値(数値)を取得 250 const num9 = saccyu_B.selectedIndex; 251 // 値(数値)から値(value値)を取得 252 const str9 = saccyu_B.options[num9].value; 253 254 const tenchaku_B = document.form3.tenchaku_B; 255 // 値(数値)を取得 256 const num10 = tenchaku_B.selectedIndex; 257 // 値(数値)から値(value値)を取得 258 const str10 = tenchaku_B.options[num10].value; 259 260 const tenteki_B = document.form3.tenteki_B; 261 // 値(数値)を取得 262 const num11 = tenteki_B.selectedIndex; 263 // 値(数値)から値(value値)を取得 264 const str11 = tenteki_B.options[num11].value; 265 266 const sonota_B = document.form3.sonota_B; 267 // 値(数値)を取得 268 const num12 = sonota_B.selectedIndex; 269 // 値(数値)から値(value値)を取得 270 const str12 = sonota_B.options[num12].value; 271 272//テーブル編集 273//殺菌剤 274for(i = 0; i < Number(str3); i++){ 275let table = document.getElementById('targetTable'); 276let newRow = table.insertRow(); 277 278let newCell = newRow.insertCell(); 279let newText = document.createTextNode('A'); 280newCell.appendChild(newText); 281 282newCell = newRow.insertCell(); 283newText = document.createTextNode('殺菌剤'); 284newCell.appendChild(newText); 285 286newCell = newRow.insertCell(); 287newCell.innerHTML = `<select> 288<option value=選択してください。">選択してください。</option> 289<option value=アフェットフロアブル">アフェットフロアブル</option> 290<option value=アミスター２０フロアブル">アミスター２０フロアブル</option> 291</select>`; 292 293 294newCell = newRow.insertCell(); 295newCell.innerHTML = `<input>`; 296 297newCell = newRow.insertCell(); 298newCell.innerHTML = `<select> 299<option value=g">g</option> 300<option value=ml">ml</option> 301</select>`; 302} 303for(i = 0; i < Number(str8); i++){ 304let table = document.getElementById('targetTable'); 305let newRow = table.insertRow(); 306 307let newCell = newRow.insertCell(); 308let newText = document.createTextNode('B'); 309newCell.appendChild(newText); 310 311newCell = newRow.insertCell(); 312newText = document.createTextNode('殺菌剤'); 313newCell.appendChild(newText); 314 315newCell = newRow.insertCell(); 316newCell.innerHTML = `<select> 317<option value=選択してください。">選択してください。</option> 318<option value=アフェットフロアブル">アフェットフロアブル</option> 319<option value=アミスター２０フロアブル">アミスター２０フロアブル</option> 320</select>`; 321 322} 323 324 325 326</body> 327</html> 328
取得した値は最終的にGoogleスプレッドシートに入力するようにします。
調べること約4時間。やり方が分からず質問させていただきました。
どうぞよろしくお願いいたします。
※文字数制限で大部分はしょりましたご了承ください。
回答1件
0
ベストアンサー
関数 clickBtn1() でやっているように、<select>を見つけて、options[selectedIndex].value なり value なりにアクセスすればよいです。
js
1for (let row of table.rows) { 2 console.log(row.cells[2].querySelector('select').value); 3}
投稿2021/12/21 02:00
総合スコア21697
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。