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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

表のプルダウンで選択した回答を抽出したい

aRyo
aRyo

総合スコア23

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

1クリップ

308閲覧

投稿2021/12/21 01:50

編集2021/12/21 01:51

生成した表のプルダウンで選択した回答を抽出したい

【やりたい事の説明】

この様な表を作りました。圃場は4つあります。
この表は農薬の種類の数を選択する表です。
仮に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=アミスター20フロアブル">アミスター20フロアブル</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=アミスター20フロアブル">アミスター20フロアブル</option> </select>`; } </body> </html>

取得した値は最終的にGoogleスプレッドシートに入力するようにします。
調べること約4時間。やり方が分からず質問させていただきました。
どうぞよろしくお願いいたします。
※文字数制限で大部分はしょりましたご了承ください。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。