Q&A
テーブル内にプルダウンメニューを表示したいのか
別のところでプルダウン入力した文字をテーブルに追加したいのか
どちらを希望しているかわかりません
やりたい事
JavaScriptでtableにプルダウンと入力画面を追加したい。
こちらのサイトを参考にしました。
https://techacademy.jp/magazine/28581
JavaScriptで行を追加し、追加した行の中でプルダウンや入力をできるようにしたいです。
html
1<table border="1" id="targetTable"> 2 <thead> 3 <tr> 4 <td>名前</td> 5 <td>年齢</td> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td>鈴木</td> 11 <td>12</td> 12 </tr> 13 <tbody> 14</table>
JavaScript
1let table = document.getElementById('targetTable'); 2let newRow = table.insertRow(); 3 4let newCell = newRow.insertCell(); 5let newText = document.createTextNode('山田');//例えばここを山田や田中,佐々木などにプルダウンで変更出来るようにしたい 6newCell.appendChild(newText); 7 8newCell = newRow.insertCell(); 9newText = document.createTextNode(18);//ここを手入力で文字を打ち込めるようにしたい 10newCell.appendChild(newText);
以上のコードを踏まえ、このような物を作りたいです。（※まだ途中です！）
圃場と農薬カテゴリを選択すると自動的に入力画面が生成される感じですね。
JavaScript,html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>サンプル</title> 6</head> 7<body> 8 9<p>農薬管理フォームです。</p> 10 11<label for="day">日付を選択してください</label> 12<p><span id="span1"></span></p> 13<form name="form1"> 14<p></p> 15<input name="date" type="date" /> 16<p></p> 17</form> 18 19 20<label for="name">記帳者を選択してください</label> 21<p><span id="span2"></span></p> 22<form name="form2"> 23<select id="name"> 24<option value="あああ">あああ</option> 25<option value="いいい">いいい</option> 26</select> 27</form> 28<p></p> 29 30 31<p></p> 32<label for="kategori">農薬を選択してください</label> 33<p><span id="span3"></span></p> 34<form name="form3"> 35<p></p> 36<table border="1"> 37 38 39<tr> 40<td></td> 41<th>あ</th> 42<th>い</th> 43<th>う</th> 44<th>え</th> 45<tr> 46 47<tr> 48<td>殺菌剤</td> 49<th> 50<select id="sakkin_m"> 51<option value="0">0</option> 52<option value="1">1</option> 53<option value="2">2</option> 54<option value="3">3</option> 55<option value="4">4</option> 56<option value="5">5</option> 57<option value="6">6</option> 58</select> 59</th> 60<th> 61<select id="sakkin_k"> 62<option value="0">0</option> 63<option value="1">1</option> 64<option value="2">2</option> 65<option value="3">3</option> 66<option value="4">4</option> 67<option value="5">5</option> 68<option value="6">6</option> 69</select> 70</th> 71<th> 72<select id="sakkin_i"> 73<option value="0">0</option> 74<option value="1">1</option> 75<option value="2">2</option> 76<option value="3">3</option> 77<option value="4">4</option> 78<option value="5">5</option> 79<option value="6">6</option> 80</select> 81</th> 82<th> 83<select id="sakkin_s"> 84<option value="0">0</option> 85<option value="1">1</option> 86<option value="2">2</option> 87<option value="3">3</option> 88<option value="4">4</option> 89<option value="5">5</option> 90<option value="6">6</option> 91</select> 92</th> 93</tr> 94 95 96<tr> 97<td>殺虫剤</td> 98<th> 99<select id="saccyu_m"> 100<option value="0">0</option> 101<option value="1">1</option> 102<option value="2">2</option> 103<option value="3">3</option> 104<option value="4">4</option> 105<option value="5">5</option> 106<option value="6">6</option> 107</select> 108</th> 109<th> 110<select id="saccyu_k"> 111<option value="0">0</option> 112<option value="1">1</option> 113<option value="2">2</option> 114<option value="3">3</option> 115<option value="4">4</option> 116<option value="5">5</option> 117<option value="6">6</option> 118</select> 119</th> 120<th> 121<select id="saccyu_i"> 122<option value="0">0</option> 123<option value="1">1</option> 124<option value="2">2</option> 125<option value="3">3</option> 126<option value="4">4</option> 127<option value="5">5</option> 128<option value="6">6</option> 129</select> 130</th> 131<th> 132<select id="saccyu_s"> 133<option value="0">0</option> 134<option value="1">1</option> 135<option value="2">2</option> 136<option value="3">3</option> 137<option value="4">4</option> 138<option value="5">5</option> 139<option value="6">6</option> 140</select> 141</th> 142</tr> 143 144 145<tr> 146<td>展着剤</td> 147<th> 148<select id="tenchaku_m"> 149<option value="0">0</option> 150<option value="1">1</option> 151<option value="2">2</option> 152<option value="3">3</option> 153<option value="4">4</option> 154<option value="5">5</option> 155<option value="6">6</option> 156</select> 157</th> 158<th> 159<select id="tenchaku_k"> 160<option value="0">0</option> 161<option value="1">1</option> 162<option value="2">2</option> 163<option value="3">3</option> 164<option value="4">4</option> 165<option value="5">5</option> 166<option value="6">6</option> 167</select> 168</th> 169<th> 170<select id="tenchaku_i"> 171<option value="0">0</option> 172<option value="1">1</option> 173<option value="2">2</option> 174<option value="3">3</option> 175<option value="4">4</option> 176<option value="5">5</option> 177<option value="6">6</option> 178</select> 179</th> 180<th> 181<select id="tenchaku_s"> 182<option value="0">0</option> 183<option value="1">1</option> 184<option value="2">2</option> 185<option value="3">3</option> 186<option value="4">4</option> 187<option value="5">5</option> 188<option value="6">6</option> 189</select> 190</th> 191</tr> 192 193 194<tr> 195<td>天敵</td> 196<th> 197<select id="tenteki_m"> 198<option value="0">0</option> 199<option value="1">1</option> 200<option value="2">2</option> 201<option value="3">3</option> 202<option value="4">4</option> 203<option value="5">5</option> 204<option value="6">6</option> 205</select> 206</th> 207<th> 208<select id="tenteki_k"> 209<option value="0">0</option> 210<option value="1">1</option> 211<option value="2">2</option> 212<option value="3">3</option> 213<option value="4">4</option> 214<option value="5">5</option> 215<option value="6">6</option> 216</select> 217</th> 218<th> 219<select id="tenteki_i"> 220<option value="0">0</option> 221<option value="1">1</option> 222<option value="2">2</option> 223<option value="3">3</option> 224<option value="4">4</option> 225<option value="5">5</option> 226<option value="6">6</option> 227</select> 228</th> 229<th> 230<select id="tenteki_s"> 231<option value="0">0</option> 232<option value="1">1</option> 233<option value="2">2</option> 234<option value="3">3</option> 235<option value="4">4</option> 236<option value="5">5</option> 237<option value="6">6</option> 238</select> 239</th> 240</tr> 241 242 243<tr> 244<td>その他</td> 245<th> 246<select id="sonota_m"> 247<option value="0">0</option> 248<option value="1">1</option> 249<option value="2">2</option> 250<option value="3">3</option> 251<option value="4">4</option> 252<option value="5">5</option> 253<option value="6">6</option> 254</select> 255</th> 256<th> 257<select id="sonota_k"> 258<option value="0">0</option> 259<option value="1">1</option> 260<option value="2">2</option> 261<option value="3">3</option> 262<option value="4">4</option> 263<option value="5">5</option> 264<option value="6">6</option> 265</select> 266</th> 267<th> 268<select id="sonota_i"> 269<option value="0">0</option> 270<option value="1">1</option> 271<option value="2">2</option> 272<option value="3">3</option> 273<option value="4">4</option> 274<option value="5">5</option> 275<option value="6">6</option> 276</select> 277</th> 278<th> 279<select id="sonota_s"> 280<option value="0">0</option> 281<option value="1">1</option> 282<option value="2">2</option> 283<option value="3">3</option> 284<option value="4">4</option> 285<option value="5">5</option> 286<option value="6">6</option> 287</select> 288</th> 289</tr> 290 291</table> 292</form> 293<p></p> 294 295<p> 296<table border="1" id="targetTable"> 297<thead> 298<tr> 299<td>圃場名</td> 300<td>カテゴリ</td> 301<td>農薬名</td> 302<td>総量</td> 303<td>単位</td> 304</tr> 305</thead> 306<tbody> 307<tr> 308<td>（例）</td> 309<td>殺菌剤</td> 310<td>アフェット</td> 311<td>600</td> 312<td>g</td> 313</tr> 314<tbody> 315</table> 316</p> 317 318 319<div> 320<input type="button" value="ボタン1" onclick="clickBtn1()"/> 321</div> 322 323<script> 324 function clickBtn1(){ 325/////////////////////////////////////////////////////////////////////////////// 326//日付の抽出 327 //const day = document.form1.date; 328 329 // 値(数値)を取得 330 //const num = day.selectedIndex; 331 332 // 値(数値)から値(value値)を取得 333 //const str = day.options[num].value; 334 335 //document.getElementById("span1").textContent = str; 336 337 /////////////////////////////////////////////////////////////////////////////// 338//記帳者の抽出 339 const name = document.form2.name; 340 341 // 値(数値)を取得 342 const num2 = name.selectedIndex; 343 344 // 値(数値)から値(value値)を取得 345 const str2 = name.options[num2].value; 346document.getElementById("span2").textContent = str2; 347 348 349 350/////////////////////////////////////////////////////////////////////////////// 351//カテゴリと圃場の抽出 352 const sakkin_maruyama = document.form3.sakkin_m; 353 // 値(数値)を取得 354 const num3 = sakkin_maruyama.selectedIndex; 355 // 値(数値)から値(value値)を取得 356 const str3 = sakkin_m.options[num3].value; 357 358 359 360 const sakkin_kamo = document.form3.sakkin_k; 361 // 値(数値)を取得 362 const num4 = sakkin_kamo.selectedIndex; 363 // 値(数値)から値(value値)を取得 364 const str4 = sakkin_k.options[num4].value; 365 366 367 const saccyu_maruyama = document.form3.saccyu_m; 368 // 値(数値)を取得 369 const num5 = saccyu_m.selectedIndex; 370 // 値(数値)から値(value値)を取得 371 const str5 = saccyu_m.options[num5].value; 372 373/////////////////////////////////////////////////////////////////////////////// 374//テーブル編集 375//圃場とカテゴリの選択した数だけ表を追加するスクリプト 376 377for(i = 0; i < Number(str3); i++){ 378let table = document.getElementById('targetTable'); 379let newRow = table.insertRow(); 380 381let newCell = newRow.insertCell(); 382let newText = document.createTextNode('あ'); 383newCell.appendChild(newText); 384 385newCell = newRow.insertCell(); 386newText = document.createTextNode(殺菌剤); 387newCell.appendChild(newText); 388 389newCell = newRow.insertCell(); 390newCell.innerHTML = `<select>`;//ここでの選択支の指定方法でつまっています！！！ 391 392newCell = newRow.insertCell(); 393newCell.innerHTML = `<input>`; 394 395} 396 397 398} 399 </script> 400 401</body> 402</html>
ここの生成された表の選択肢を設定する方法が分からないです
調べたのですが、良く分からず詰まってしまいました。
ご助言の程、よろしくお願いいたします。
コメントありがとうございます。
テーブル内にプルダウンしたいです。
同様に、入力画面もテーブル内で行いたいです。
まず、JavaScriptなしで目的の表示をするHTMLがどうなるべきかわかりますか?
はい、わかります。
名前と年齢の表が出来ます。
JavaScriptを使用すると行を追加し、山田と１８歳の行が追加されます。
こういう意味でしょうか？
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>
プルダウンや手入力をするためにはどんなHTMLになっていれば良いかわかりますか、という質問です。
なるほど。質問の意味を理解できていなかったです。失礼しました。
上記のhtmlで出来ると思っていたのですが、不可なら分かりません。
教えていただけると幸いです。
まだ触り始めたばっかりなのですが、個人的にはここをリストや入力に変換するコードがあるのかと思っていました。
let newText = document.createTextNode('山田');
document.createTextNode() の意味もあやふやなぐらいだと、まずは入門書を一冊読むのがよいかと思います。
私もそう思います。
もしよろしければ、おすすめな参考書などあれば教えていただけないでしょうか。
回答3件
0
templateをつかうとこんな感じ
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('#btn').addEventListener('click',()=>{ 4 const clone = document.querySelector("template").content.cloneNode(true); 5 document.querySelector('#targetTable tbody').appendChild(clone); 6 }); 7}); 8</script> 9<template> 10<tr> 11<td><select> 12<option>山田</option> 13<option>田中</option> 14<option>佐々木</option> 15</select> 16</td> 17<td><input type="text"></td> 18</tr> 19</template> 20<input type="button" value="btn" id="btn"> 21<table border="1" id="targetTable"> 22 <thead> 23 <tr> 24 <td>名前</td> 25 <td>年齢</td> 26 </tr> 27 </thead> 28 <tbody> 29 <tr> 30 <td>鈴木</td> 31 <td>12</td> 32 </tr> 33 <tbody> 34</table>
投稿2021/12/20 02:41
総合スコア116724
0
thead をクリックすると行が増えます
コンソールに表の中の値が取得されて表示されます
js&html
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8" /> 4<title></title> 5<body> 6<table border="1" id="targetTable"> 7 <thead> 8 <tr> 9 <td>名前 10 <td>年齢 11 <tbody> 12 <tr> 13 <td> 14 <select name="namae"> 15 <option selected>-- 16 <option>鈴木 17 <option>佐藤 18 <option>田中 19 <option>中村 20 </select> 21 <td> 22 <select name="tosi"> 23 <option selected>-- 24 <option value="0">0</option> 25 <option value="1">1</option> 26 <option value="2">2</option> 27 <option value="3">3</option> 28 <option value="4">4</option> 29 <option value="5">5</option> 30 <option value="6">6</option> 31 </select> 32</table> 33 34<script> 35document.querySelector ('#targetTable thead').addEventListener ('click', addRow, false); 36 37function addRow () { 38 let 39 tbody = document.querySelector ('#targetTable tbody'), 40 lastTR = tbody.querySelector ('tr:last-of-type'), 41 newTR = lastTR.cloneNode (true); 42 43 newTR.querySelectorAll ('select').forEach (e=> e.selectedIndex = 0); 44 tbody.appendChild (newTR); 45 46 console.table (getValue()); 47} 48 49function getValue () { 50 let 51 tbody = document.querySelector ('#targetTable tbody'), 52 rst = [...tbody.rows].map (row=>[...row.querySelectorAll ('*[name]')].map (e=> e.value)); 53 return rst; 54} 55</script> 56
投稿2021/12/20 02:18
総合スコア616
ご回答ありがとうございます。
私の質問の仕方が悪かったのですが、JavaScriptで農薬の選択肢を入れたいです。（html上では選択肢は出さない）
情報追加しましたので、どうやれば良いかご助言頂けると幸いです。
もうひとかたのご助言で、入力方法はわかりましたので、あとは選択肢をプルダウンで表示させたいだけです。
テーブルの最後の行をコピーして追加するだけのプログラムなので最初の行だけこだわってお書きなさい。
取得したいセルの値には name 属性を、おつけなさい。
理解できないようなら諦めなさい。
0
ベストアンサー
js
1let newCell = newRow.insertCell(); 2let newText = document.createTextNode('山田');//例えばここを山田や田中,佐々木などにプルダウンで変更出来るようにしたい 3newCell.appendChild(newText); 4 5newCell = newRow.insertCell(); 6newText = document.createTextNode(18);//ここを手入力で文字を打ち込めるようにしたい 7newCell.appendChild(newText);
問題が無ければinnerHTMLで簡単に済ませるのが良いかと思います。以下のようなかんじです。
js
1let newCell = newRow.insertCell(); 2newCell.innerHTML = `<select><option>...省略`; 3 4newCell = newRow.insertCell(); 5newCell.innerHTML = `<input>`;
createTextNode() のように DOM ノードの生成でやるなら、document.createElement('select') document.createElement('input') などを組み合わせます。
投稿2021/12/20 01:49
総合スコア21695
あなたの回答
tips
プレビュー
