生成した表のプルダウンで選択した回答を抽出したい
【やりたい事の説明】
この様な表を作りました。圃場は４つあります。
この表は農薬の種類の数を選択する表です。
仮にAの圃場で殺菌剤を2
Bの圃場で殺虫剤を2と選択します。
↓
選択した後、処理ボタンを押すと以下の表が生成されます。
そして生成された表のプルダウンで選択した値を取得したいです。
【やった事】
この様に表全てのテキストを取得した所、選択した物ではなくプルダウンの値全てを取得してしまいました。
javascript
for (let row of table.rows) { for(let cell of row.cells){ console.log(cell.innerText); }
コードは以下のようになります。
html,Javascript
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body> <p></p> <label for="kategori">農薬の種類を選択し、【OK】を押して下さい。</label> <p><span id="span3"></span></p> <form name="form3"> <p></p> <table border="1"> <tr> <td></td> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <tr> <tr> <td>殺菌剤</td> <th> <select id="sakkin_A"> <option value="0">0</option> </select> </th> <th> <select id="sakkin_B"> <option value="0">0</option> </select> </th> <th> <select id="sakkin_C"> <option value="0">0</option> </select> </th> <th> <select id="sakkin_D"> <option value="0">0</option> </select> </th> </tr> <tr> <td>殺虫剤</td> <th> <select id="saccyu_A"> <option value="0">0</option> </select> </th> <th> <select id="saccyu_B"> <option value="0">0</option> </select> </th> <th> <select id="saccyu_C"> <option value="0">0</option> </select> </th> <th> <select id="saccyu_D"> <option value="0">0</option> </select> </th> </tr> <tr> <td>展着剤</td> <th> <select id="tenchaku_A"> <option value="0">0</option> </select> </th> <th> <select id="tenchaku_B"> <option value="0">0</option> </select> </th> <th> <select id="tenchaku_C"> <option value="0">0</option> </select> </th> <th> <select id="tenchaku_D"> <option value="0">0</option> </select> </th> </tr> <tr> <td>天敵</td> <th> <select id="tenteki_A"> <option value="0">0</option> </select> </th> <th> <select id="tenteki_B"> <option value="0">0</option> </select> </th> <th> <select id="tenteki_C"> <option value="0">0</option> </select> </th> <th> <select id="tenteki_D"> <option value="0">0</option> </select> </th> </tr> <tr> <td>その他</td> <th> <select id="sonota_A"> <option value="0">0</option> </select> </th> <th> <select id="sonota_B"> <option value="0">0</option> </select> </th> <th> <select id="sonota_C"> <option value="0">0</option> </select> </th> <th> <select id="sonota_D"> <option value="0">0</option> </select> </th> </tr> </table> </form> <p></p> <div> <input type="button" value="OK" onclick="clickBtn1()"/> </div> <p> <table border="1" id="targetTable"> <thead> <tr> <td>圃場名</td> <td>カテゴリ</td> <td>農薬名</td> <td>総量</td> <td>単位</td> </tr> </thead> <tbody> <tr> <td>（例）</td> <td>殺菌剤</td> <td>アフェットフロアブル</td> <td>600</td> <td>g</td> </tr> <tbody> </table> </p> <p> <div> <input type="button" value="OK" onclick="clickBtn2()"/> </div> </p> <script> function clickBtn2(){ let table = document.getElementById('targetTable'); for (let row of table.rows) { for(let cell of row.cells){ console.log(row,cell); } } var selected = $("#select01").val(); var selectedValue = selected.val(); var selectedText = selected.text(); console.log(selectedValue); } </script> <script> function clickBtn1(){ /////////////////////////////////////////////////////////////////////////////// //カテゴリと圃場の抽出 //A圃場 const sakkin_A = document.form3.sakkin_A; // 値(数値)を取得 const num3 = sakkin_A.selectedIndex; // 値(数値)から値(value値)を取得 const str3 = sakkin_A.options[num3].value; const saccyu_A = document.form3.saccyu_A; // 値(数値)を取得 const num4 = saccyu_A.selectedIndex; // 値(数値)から値(value値)を取得 const str4 = saccyu_A.options[num4].value; const tenchaku_A = document.form3.tenchaku_A; // 値(数値)を取得 const num5 = tenchaku_A.selectedIndex; // 値(数値)から値(value値)を取得 const str5 = tenchaku_A.options[num5].value; const tenteki_A = document.form3.tenteki_A; // 値(数値)を取得 const num6 = tenteki_A.selectedIndex; // 値(数値)から値(value値)を取得 const str6 = tenteki_A.options[num6].value; const sonota_A = document.form3.sonota_A; // 値(数値)を取得 const num7 = sonota_A.selectedIndex; // 値(数値)から値(value値)を取得 const str7 = sonota_A.options[num7].value; //B圃場 const sakkin_B = document.form3.sakkin_B; // 値(数値)を取得 const num8 = sakkin_B.selectedIndex; // 値(数値)から値(value値)を取得 const str8 = sakkin_B.options[num8].value; const saccyu_B = document.form3.saccyu_B; // 値(数値)を取得 const num9 = saccyu_B.selectedIndex; // 値(数値)から値(value値)を取得 const str9 = saccyu_B.options[num9].value; const tenchaku_B = document.form3.tenchaku_B; // 値(数値)を取得 const num10 = tenchaku_B.selectedIndex; // 値(数値)から値(value値)を取得 const str10 = tenchaku_B.options[num10].value; const tenteki_B = document.form3.tenteki_B; // 値(数値)を取得 const num11 = tenteki_B.selectedIndex; // 値(数値)から値(value値)を取得 const str11 = tenteki_B.options[num11].value; const sonota_B = document.form3.sonota_B; // 値(数値)を取得 const num12 = sonota_B.selectedIndex; // 値(数値)から値(value値)を取得 const str12 = sonota_B.options[num12].value; //テーブル編集 //殺菌剤 for(i = 0; i < Number(str3); i++){ let table = document.getElementById('targetTable'); let newRow = table.insertRow(); let newCell = newRow.insertCell(); let newText = document.createTextNode('A'); newCell.appendChild(newText); newCell = newRow.insertCell(); newText = document.createTextNode('殺菌剤'); newCell.appendChild(newText); newCell = newRow.insertCell(); newCell.innerHTML = `<select> <option value=選択してください。">選択してください。</option> <option value=アフェットフロアブル">アフェットフロアブル</option> <option value=アミスター２０フロアブル">アミスター２０フロアブル</option> </select>`; newCell = newRow.insertCell(); newCell.innerHTML = `<input>`; newCell = newRow.insertCell(); newCell.innerHTML = `<select> <option value=g">g</option> <option value=ml">ml</option> </select>`; } for(i = 0; i < Number(str8); i++){ let table = document.getElementById('targetTable'); let newRow = table.insertRow(); let newCell = newRow.insertCell(); let newText = document.createTextNode('B'); newCell.appendChild(newText); newCell = newRow.insertCell(); newText = document.createTextNode('殺菌剤'); newCell.appendChild(newText); newCell = newRow.insertCell(); newCell.innerHTML = `<select> <option value=選択してください。">選択してください。</option> <option value=アフェットフロアブル">アフェットフロアブル</option> <option value=アミスター２０フロアブル">アミスター２０フロアブル</option> </select>`; } </body> </html>
取得した値は最終的にGoogleスプレッドシートに入力するようにします。
調べること約4時間。やり方が分からず質問させていただきました。
どうぞよろしくお願いいたします。
※文字数制限で大部分はしょりましたご了承ください。
まだ回答がついていません
会員登録して回答してみよう
