###実現したいこと
今のコードだと長くなってしまいそうなので、javascriptでループさせて短くできないか、考えているのですが、なかなかできません。どうすればループをさせる形で表現できるでしょうか?
やりたいことは以下になります。
・テーブルをどんどん下のほうに追加したい
・チェックボックスのON/OFFでselectとinputを変えたい
・selectとinputで選択した値を足し算したい
Webコンテンツやり始めて2週間目。とんでもない初心者ですが、生暖かい目で指摘していただけると幸いです。
###該当のソースコード
html
1<table class="table table-striped"> 2 <thead> 3 <tr> 4 <th>項目1</th> 5 <th class="col-md-1">自由入力<BR>(ON/OFF)</th> 6 <th>金額</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>商品1</td> 12 <td> 13 <div style="display:inline-flex"> 14 <form name="ckeckkakunin1" action=""> 15 <input type="checkbox" id="chk1" name="chk1" onclick="chkdisp(this,'ans1','ans2')" onChange="keisan()"/> 16 </form> 17 </div> 18 </td> 19 <td> 20 <form class="form-inline" id="ans2" name="selectkakunin1"> 21 <div class="form-group"> 22 <div class="input-group"> 23 <div class="input-group-addon">¥</div> 24 <select class="form-control" id="usage1select2" name="selecttest1" onChange="keisan()"> 25 <option selected disabled class="text-hide">100</option><option>0</option><option>50</option><option>100</option><option>500</option><option>1000</option><option>10000</option> 26 </select> 27 </div> 28 </div> 29 </form> 30 <form class="form-inline" id="ans1" style="display:none;" name="freekakunin1"> 31 <div class="form-group"> 32 <div class="input-group"> 33 <span class="input-group-addon">¥</span> 34 <input type="text" class="form-control" placeholder="200" onChange="keisan()" name="free1" /> 35 </div> 36 </div> 37 </form> 38 39 </td> 40 </tr> 41 <tr> 42 <td>商品2</td> 43 <td> 44 <div style="display:inline-flex"> 45 <form name="ckeckkakunin2" action=""> 46 <input type="checkbox" id="chk2" name="chk2" onclick="chkdisp(this,'ans3','ans4')" onChange="keisan()"/> 47 </form> 48 </div> 49 </td> 50 <td> 51 <form class="form-inline" id="ans4" name="selectkakunin2"> 52 <div class="form-group"> 53 <div class="input-group"> 54 <div class="input-group-addon">¥</div> 55 <select class="form-control" id="usage1select2" name="selecttest2" onChange="keisan()"> 56 <option selected disabled class="text-hide">100</option><option>0</option><option>50</option><option>100</option><option>500</option><option>1000</option><option>10000</option> 57 </select> 58 </div> 59 </div> 60 </form> 61 <form class="form-inline" id="ans3" style="display:none;" name="freekakunin2"> 62 <div class="form-group"> 63 <div class="input-group"> 64 <span class="input-group-addon">¥</span> 65 <input type="text" class="form-control" placeholder="200" onChange="keisan()" name="free2" > 66 </div> 67 </div> 68 </form> 69 70 </td> 71 </tr> 72 <tr> 73 <td>商品3</td> 74 <td> 75 <div style="display:inline-flex"> 76 <form name="ckeckkakunin3" action=""> 77 <input type="checkbox" id="chk3" name="chk3" onclick="chkdisp(this,'ans5','ans6')" onChange="keisan()"/> 78 </form> 79 </div> 80 </td> 81 <td> 82 <form class="form-inline" id="ans6" name="selectkakunin3"> 83 <div class="form-group"> 84 <div class="input-group"> 85 <div class="input-group-addon">¥</div> 86 <select class="form-control" id="usage1select2" name="selecttest3" onChange="keisan()"> 87 <option selected disabled class="text-hide">100</option><option>0</option><option>50</option><option>100</option><option>500</option><option>1000</option><option>10000</option> 88 </select> 89 </div> 90 </div> 91 </form> 92 <form class="form-inline" id="ans5" style="display:none;" name="freekakunin3"> 93 <div class="form-group"> 94 <div class="input-group"> 95 <span class="input-group-addon">¥</span> 96 <input type="text" class="form-control" placeholder="200" onChange="keisan()" name="free3" > 97 </div> 98 </div> 99 </form> 100 </td> 101 </tr> 102 </tbody> 103</table> 104<form action="#" name="form1"> 105 <tr> 106 <td align="right"><strong>合計</strong></td> 107 <td><input type="text" name="field_total" size="8" value="0"> 円</td> 108 </tr> 109</form>
javascript
1<script type="text/javascript"> 2 3function keisan(){ 4 check1 = document.ckeckkakunin1.chk1.checked; 5 check2 = document.ckeckkakunin2.chk2.checked; 6 check3 = document.ckeckkakunin3.chk3.checked; 7 var price1 = document.selectkakunin1.selecttest1.value; 8 var price2 = document.selectkakunin2.selecttest2.value; 9 var price3 = document.selectkakunin3.selecttest3.value; 10 11 if (check1 == true) { 12 price1 = document.freekakunin1.free1.value; 13 if (price1 == ""){ 14 price1 = 0; 15 }else{ 16 17 } 18 }else{ 19 price1 = document.selectkakunin1.selecttest1.value; 20 if (price1 == ""){ 21 price1 = 100; 22 }else{ 23 24 } 25 } 26 27 if (check2 == true) { 28 price2 = document.freekakunin2.free2.value; 29 if (price2 == ""){ 30 price2 = 0; 31 }else{ 32 33 } 34 }else{ 35 price2 = document.selectkakunin2.selecttest2.value; 36 if (price2 == ""){ 37 price2 = 100; 38 }else{ 39 40 } 41 } 42 43 if (check3 == true) { 44 price3 = document.freekakunin3.free3.value; 45 if (price3 == ""){ 46 price3 = 0; 47 }else{ 48 49 } 50 }else{ 51 price3 = document.selectkakunin3.selecttest3.value; 52 if (price3 == ""){ 53 price3 = 100; 54 }else{ 55 56 } 57 } 58 59 // 合計を計算 60 var total = parseInt(price1) + parseInt(price2) + parseInt(price3); 61 document.form1.field_total.value = total; // 合計を表示 62 } 63 64 window.onload=keisan(); 65</script> 66 67<script type="text/javascript"> 68function chkdisp( obj,id1,id2 ) { 69 if( obj.checked ){ 70 document.getElementById(id1).style.display = "block"; 71 document.getElementById(id2).style.display = "none"; 72 } 73 else { 74 document.getElementById(id1).style.display = "none"; 75 document.getElementById(id2).style.display = "block"; 76 } 77} 78</script>
###考察
<form name="ckeckkakunin?" action="">などを<table>の外側に移動して、for文を使うんだろうと思うもののうまくいかず悩んでいます。 宜しくお願いし致します。回答2件
あなたの回答
tips
プレビュー