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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

解決済

JavaScriptでtableにプルダウンと入力画面を追加する方法を教えて下さい。

aRyo
aRyo

総合スコア23

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

3回答

0評価

0クリップ

575閲覧

投稿2021/12/20 01:25

編集2021/12/20 02:53

やりたい事
JavaScriptでtableにプルダウンと入力画面を追加したい。

こちらのサイトを参考にしました。
https://techacademy.jp/magazine/28581

JavaScriptで行を追加し、追加した行の中でプルダウンや入力をできるようにしたいです。

html

<table border="1" id="targetTable"> <thead> <tr> <td>名前</td> <td>年齢</td> </tr> </thead> <tbody> <tr> <td>鈴木</td> <td>12</td> </tr> <tbody> </table>

JavaScript

let table = document.getElementById('targetTable'); let newRow = table.insertRow(); let newCell = newRow.insertCell(); let newText = document.createTextNode('山田');//例えばここを山田や田中,佐々木などにプルダウンで変更出来るようにしたい newCell.appendChild(newText); newCell = newRow.insertCell(); newText = document.createTextNode(18);//ここを手入力で文字を打ち込めるようにしたい newCell.appendChild(newText);

以上のコードを踏まえ、このような物を作りたいです。(※まだ途中です!)
圃場と農薬カテゴリを選択すると自動的に入力画面が生成される感じですね。

JavaScript,html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body> <p>農薬管理フォームです。</p> <label for="day">日付を選択してください</label> <p><span id="span1"></span></p> <form name="form1"> <p></p> <input name="date" type="date" /> <p></p> </form> <label for="name">記帳者を選択してください</label> <p><span id="span2"></span></p> <form name="form2"> <select id="name"> <option value="あああ">あああ</option> <option value="いいい">いいい</option> </select> </form> <p></p> <p></p> <label for="kategori">農薬を選択してください</label> <p><span id="span3"></span></p> <form name="form3"> <p></p> <table border="1"> <tr> <td></td> <th></th> <th></th> <th></th> <th></th> <tr> <tr> <td>殺菌剤</td> <th> <select id="sakkin_m"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="sakkin_k"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="sakkin_i"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="sakkin_s"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> </tr> <tr> <td>殺虫剤</td> <th> <select id="saccyu_m"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="saccyu_k"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="saccyu_i"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="saccyu_s"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> </tr> <tr> <td>展着剤</td> <th> <select id="tenchaku_m"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="tenchaku_k"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="tenchaku_i"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="tenchaku_s"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> </tr> <tr> <td>天敵</td> <th> <select id="tenteki_m"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="tenteki_k"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="tenteki_i"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="tenteki_s"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> </tr> <tr> <td>その他</td> <th> <select id="sonota_m"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="sonota_k"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="sonota_i"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> <th> <select id="sonota_s"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th> </tr> </table> </form> <p></p> <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> <div> <input type="button" value="ボタン1" onclick="clickBtn1()"/> </div> <script> function clickBtn1(){ /////////////////////////////////////////////////////////////////////////////// //日付の抽出 //const day = document.form1.date; // 値(数値)を取得 //const num = day.selectedIndex; // 値(数値)から値(value値)を取得 //const str = day.options[num].value; //document.getElementById("span1").textContent = str; /////////////////////////////////////////////////////////////////////////////// //記帳者の抽出 const name = document.form2.name; // 値(数値)を取得 const num2 = name.selectedIndex; // 値(数値)から値(value値)を取得 const str2 = name.options[num2].value; document.getElementById("span2").textContent = str2; /////////////////////////////////////////////////////////////////////////////// //カテゴリと圃場の抽出 const sakkin_maruyama = document.form3.sakkin_m; // 値(数値)を取得 const num3 = sakkin_maruyama.selectedIndex; // 値(数値)から値(value値)を取得 const str3 = sakkin_m.options[num3].value; const sakkin_kamo = document.form3.sakkin_k; // 値(数値)を取得 const num4 = sakkin_kamo.selectedIndex; // 値(数値)から値(value値)を取得 const str4 = sakkin_k.options[num4].value; const saccyu_maruyama = document.form3.saccyu_m; // 値(数値)を取得 const num5 = saccyu_m.selectedIndex; // 値(数値)から値(value値)を取得 const str5 = saccyu_m.options[num5].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('あ'); newCell.appendChild(newText); newCell = newRow.insertCell(); newText = document.createTextNode(殺菌剤); newCell.appendChild(newText); newCell = newRow.insertCell(); newCell.innerHTML = `<select>`;//ここでの選択支の指定方法でつまっています!!! newCell = newRow.insertCell(); newCell.innerHTML = `<input>`; } } </script> </body> </html>

イメージ説明
ここの生成された表の選択肢を設定する方法が分からないです

調べたのですが、良く分からず詰まってしまいました。
ご助言の程、よろしくお願いいたします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

yambejp

2021/12/20 01:33

テーブル内にプルダウンメニューを表示したいのか 別のところでプルダウン入力した文字をテーブルに追加したいのか どちらを希望しているかわかりません
aRyo

2021/12/20 01:34

コメントありがとうございます。 テーブル内にプルダウンしたいです。 同様に、入力画面もテーブル内で行いたいです。
int32_t

2021/12/20 01:37

まず、JavaScriptなしで目的の表示をするHTMLがどうなるべきかわかりますか?
aRyo

2021/12/20 01:39

はい、わかります。 名前と年齢の表が出来ます。 JavaScriptを使用すると行を追加し、山田と18歳の行が追加されます。
aRyo

2021/12/20 01:41

こういう意味でしょうか? htmlで書くとかけるのですが、JavaScriptでの書き方がわかりません。 <select id="数字"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </th>
int32_t

2021/12/20 01:43

プルダウンや手入力をするためにはどんなHTMLになっていれば良いかわかりますか、という質問です。
aRyo

2021/12/20 01:46

なるほど。質問の意味を理解できていなかったです。失礼しました。 上記のhtmlで出来ると思っていたのですが、不可なら分かりません。 教えていただけると幸いです。
aRyo

2021/12/20 01:47

まだ触り始めたばっかりなのですが、個人的にはここをリストや入力に変換するコードがあるのかと思っていました。 let newText = document.createTextNode('山田');
int32_t

2021/12/20 01:51

document.createTextNode() の意味もあやふやなぐらいだと、まずは入門書を一冊読むのがよいかと思います。
aRyo

2021/12/20 02:06

私もそう思います。 もしよろしければ、おすすめな参考書などあれば教えていただけないでしょうか。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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