締切済み

HTML　ドロップダウン~のデータ取得の仕方

2022/04/10 02:14

このサイトで勉強させてもらいながら、下記の「やりたいこと」を目指して、下記のソースで表にドロップダウンを組み込んだものまで作成することができました。その次のドロップダウンからのデータ取得、その後のチェックボックスを使った選択されたものだけが計算される方法でつまずいてしまいました。やれる方法をご存じの方教えていただけないでしょうか。よろしくお願いします。（やりたいこと）１．列AAAにあるドロップダウンリストを選択すると列BBBにAAAとあらかじめ関連付けられた数値が入ります。列CCCとDDDはinput（入力欄です）。２．1行目(1.TM)とチェックボックスで選択された行のみ列AAAの文字列と列BBB～列DDDの数値が計算されたものが、上の計算ボタンの横のBOXに表示される。　（計算）　チェックされた行ごとで「BBB＊（CCC＋DDD)」を計算し、1.TMとチェックされた行で「ＴＭ行の計算結果/(チェックされた行の計算結果の集計)）％」をそれぞれ計算し、計算結果に「１．ＴＭ：〇〇％、２，bbb：△△％」と表示させる。ーーーー現在まで記載したソースコードーーーー <!DOCTYPE hrml> <meta charset="utf-8"> <title></title> <style></style> <body> 　<INPUT type="button" value=" 計算 " onClick="calc() "> 　<INPUT name="y" size=30><BR> <table border="1"> <tr> <td></td> <td>ＡＡＡ</td> <td>ＢＢＢ</td> <td>ＣＣＣ</td> <td>ＤＤＤ</td> </tr> <tr> <td></td> <td>1.ＴＭ</td> <td><INPUT name="a_name" size=10 value ="300"></td> <td><INPUT name="a_int" size=10 value ="1"></td> <td><INPUT name="a_Hnum" size=10 value ="1"></td> </tr> <tr> <td><input type="checkbox" ></td> <td>2.<select id="A"></select></td> <td><INPUT name="b_mw" size=10 value ="80"></td> <td><INPUT name="b_int" size=10 value ="0.2"></td> <td><INPUT name="b_Hnum" size=10 value ="2"></td> </tr> <tr> <td><input type="checkbox" ></td> <td>3.<select id="B"></select></td> <td><INPUT name="h_mw" size=10></td> <td><INPUT name="h_int" size=10></td> <td><INPUT name="h_Hnum" size=10></td> </tr> <tr> <td><input type="checkbox" ></td> <td>4.<select id="C"></td> <td><INPUT name="i_mw" size=10></td> <td><INPUT name="i_int" size=10></td> <td><INPUT name="i_Hnum" size=10></td> </tr> </table> <script> function calc() { document.y.value = A; } function isObject (arg) { 　return arg !== null && 'object' === typeof arg && 'Object' === arg.constructor.name; } function createOptions (...args) { 　const 　　vaild = ['string', 'number'], 　　fgm = document.createDocumentFragment (); 　for (let arg of args) { 　　if (null === arg) 　　　continue; 　　let parent = fgm; 　　//オブジェクト型でラベルがあれば optgroup と見なす　　if (isObject (arg)) { 　　　let { label, options } = arg; 　　　if (label) { 　　　　let optgroup = document.createElement ('optgroup'); 　　　　optgroup.label = label; 　　　　parent = parent.appendChild (optgroup); 　　　} 　　　arg = Array.isArray (options) ? options: [options]; 　　} 　　else 　　　arg = [arg]; 　　//配列ならば　　parent.append (...arg.map (a=> Array.isArray (a) ? new Option (...a): new Option (a, a))); 　} 　return fgm; } //_________________ let a = createOptions ("選択して下さい", ["abc", 1], ["def",2], ["nnn",3]); let s = [A, document.getElementById ('B'), document.querySelector ('#C')]; s.forEach (e=> e.appendChild (a.cloneNode (true))); </script>

pikopiko29
お礼率53% (48/90)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

babu_baboo
ベストアンサー率51% (268/525)

2022/04/10 21:30 回答No.2

あとは頑張ってください。非常に難解に見えるかもしれませんが・・・。 <!DOCTYPE hrml> <meta charset="utf-8"> <title></title> <style> table { 　counter-reset: cnt; } table tr>td:nth-of-type(2)::before { 　counter-increment: cnt; 　content: counter(cnt) "."; } td input[type="number"] { 　text-align: right; 　width: 10em; } input[type="button"] { 　padding: 0 1ex; } input[readonly] { 　background: rgba(0,0,0,.1); } output { 　display: inline-block; 　width: 20em; 　height: 1em; 　padding: .5ex; 　border: 1px red solid; } </style> <body> <p> 　<input type="button" value="計算" onClick="calc();"> 　<output id="Y"></output> </p> <table border="1" id="TB"> 　<thead> 　　<tr> 　　　<th>  　　　<th>ＡＡＡ　　　<th>ＢＢＢ</td> 　　　<th>ＣＣＣ</td> 　　　<th>ＤＤＤ</td> 　<tbody> 　　<tr> 　　　<td>  　　　<td>TM 　　　<td><INPUT type="number"> 　　　<td><INPUT type="number"> 　　　<td><INPUT type="number"> 　　<tbody> 　　<template id="TP"> 　　　<tr> 　　　　<td><input type="checkbox" > 　　　　<td> 　　　　　<select> 　　　　　　<option selected>選択して下さい　　　　　　<option value="1">abc 　　　　　　<option value="2">def 　　　　　　<option value="3">ghi 　　　　　</select> 　　　　<td><INPUT type="number" readonly> 　　　　<td><INPUT type="number"> 　　　　<td><INPUT type="number"> 　　</template> </table> <script> const rowMax = 4; TP.parentNode.append (...[...Array(rowMax)].map (_=>TP.content.cloneNode(true))); let inps = document.querySelectorAll ('tbody>tr>td>input[type="number"]'); let defNum = [300,1,1,80,0.2,2]; defNum.forEach ((n,i)=>inps[i].value = n); TB.addEventListener ('change', handler, false); function handler ({target:e}) { 　let tr, inp; 　if ('SELECT'===e.tagName) 　　if (tr = e.closest ('tr')) 　　　if (inp = tr.querySelector ('td:nth-of-type(3)>input')) 　　　　inp.value = e.value; } function toNum (e) { 　return e.valueAsNumber || 0; } function calc () { 　let 　　[tb0, tb1] = TB.tBodies, 　　first = [...tb0.querySelectorAll ('tr>td>input[type="number"]')] 　　　.map (toNum), 　　other = [...tb1.rows] 　　　.filter (tr=>tr.querySelector ('tr>td>input[type="checkbox"]:checked')) 　　　.map(a=>[...a.querySelectorAll('tr>td>input[type="number"]')].map(toNum)); 　console.log (first, other); 　Y.value = '計算の結果は・・・'; } </script>

質問者

お礼 2022/04/11 05:45

ご回答ありがとうございます。いつもありがとうございます。すぐ理解はできていませんが、勉強していきたいと思います。ありがとうございます。

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2022/04/10 16:54 回答No.1

document要素において、changeイベントを監視します。その要素が対象となっている selectであるのならば、そのselect要素の祖先要素を検索し、tr 要素を見つけ出します。 tr要素の子孫要素の中で、3番目のtd要素の子要素であるinput要素を見つけ出します。後は値を代入します。 document.addEventListener ('change', handler, false); function handler ({target:e}) { 　if ([A,B,C].includes (e)) { 　　let tr = e.closest ('tr'); 　　let inp = tr.querySelector ('td:nth-of-type(3)>input'); 　　inp.value = e.value; 　} } 理解せず与えられたものを組み合わせています。そのまま突き進みますか？

ログインすると、全ての回答が全文表示されます。