複数行の計算を可能にする方法
- 初心者の方が作成したHTMLの表で、Javascriptで複数行の計算を可能にする方法について質問があります。
- 質問者は自分なりに色々試しましたがうまくいかず、解決策を教えてほしいとしています。
- 具体的なコードの変更案やアドバイスを求めています。
- ベストアンサー
index が0の1行目が計算されない
お世話になります。 基本的な事もわかっていない超初心者です。 どうか、ご教授下さい。 以下のhtml表はphpで<?php $index = 0; while ( ループ条件 { ?> <input type="button" value="計算" onclick="keisan(<?= $index ?>)" /> <? php$index++;} ?> でできた表ですが、 以下のjavascript でkeisan ( index )が下記のように表が1行しかない場合 javascriptエラーで計算できません。 <script type="text/javascript"> function keisan ( index ) { var formObj = document.tasizan; var aa = parseInt ( formObj.aa[index].value ); var bb = parseInt ( formObj.bb[index].value ); formObj.kaito[index].value = aa + bb;} </script> <form name="tasizan"> <table> <tr><th>A</th><th>B</th><th>回答</th></tr><tr> <td><input type="text" name="aa" size="5" /></td> <td><input type="text" name="bb" size="5" /></td> <td><input type="text" name="kaito" size="10" /> <input type="button" value="計算" onclick="keisan(0)" /></td> </tr></table></form> そこで自分なりに function keisan ( index ) { if(index==0){var formObj = document.tasizan; var aa = parseInt ( formObj.aa.value ); var bb = parseInt ( formObj.bb.value ); formObj.kaito.value = aa + bb;} if(index>1){ var formObj = document.tasizan; var aa = parseInt ( formObj.aa[index].value ); var bb = parseInt ( formObj.bb[index].value ); formObj.kaito[index].value = aa + bb; };} 等、色々考えてみましたがこれでは複数行ある時の1行目が計算されません。 どうしたら複数行ある時にも1行目を計算できるようになるのでしょうか? 具体的に教えて頂けると大変助かります。 どうかご教授の程よろしくお願い致します。
- chikomaru
- お礼率81% (116/143)
- JavaScript
- 回答数8
- ありがとう数8
- みんなの回答 (8)
- 専門家の回答
質問者が選んだベストアンサー
#5 です。イカ、#5 の補足より引用します。 > <form> にする必要とないという事ですが、計算結果をsubmitしてaction post したいと思っています。 いえ、<form> にする必要がないという意ではなく、「複数の <form> を作成すればいいんじゃなイカ?」ということです。 複数の問を内包する <form> を作っておられるようですが、例えば3つの問があるならそれぞれに対応する<form>を3つ作成すればよいと考えました。 ただし、HTML4,5 では <form><tr>...</tr></form> にすることを許していないので構造上、難しいなと。 <table> に拘りがなければいくらでも方法はあります。 http://jsfiddle.net/4V3Kg/ > またattachEventを利用の意味が分かりません。 IE8- は addEventListener をサポートしていないため、attachEvent を使用する必要があります。 http://jsfiddle.net/BVcr7/2/ https://developer.mozilla.org/en/DOM/element.addEventListener#Legacy_Internet_Explorer_and_attachEvent
その他の回答 (7)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
>色々考えてみましたがこれでは複数行ある時の1行目が計算されません。 indexで判断するのではなく、lengthで判断してみてください。 function keisan ( index ) { var formObj = document.tasizan; if( formObj.aa.length===undefined ){ var aa = parseInt ( formObj.aa.value ); var bb = parseInt ( formObj.bb.value ); formObj.kaito.value = aa + bb; }else{ var aa = parseInt ( formObj.aa[index].value ); var bb = parseInt ( formObj.bb[index].value ); formObj.kaito[index].value = aa + bb; } } あと、No.4で出てますが、 getElementsByName()を使うと、aaが1つしかなくても常に配列(正確にはHtmlElementCollection)になります。
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご教授ありがとうございました。 お礼のお返事が遅くなりまして申し訳ありません。 実は私が知りたかったのはこの inndex lengthでなんとかできないかな? と思っていたので、この回答をお待ちしていました。 但、式に当てはめてみましたところ、 現在、エラーが出て動いてくれません。 もうちょっとこれで考えてみたいと思っていますが、 どこが間違っているのか分からなくて煮詰まっています。 ご教授ありがとうございました。 また何かありましたら是非よろしくお願い致します。
- babu_baboo
- ベストアンサー率51% (268/525)
せっかく書いたものなので、イカ(コードは、たこ)すために手直し。 IEの古いバージョンだとかは、見なかったことに。 (今更ながらですが、全角空白は、半角にしてください。) <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <form id="tasizan" action="#" onsubmit="return false;"> <table> <tr> <th>A <th>B <th>回答 <tr> <td> <input type="text" name="aa" size="5" value="1000"> <td> <input type="text" name="bb" size="5" value="2000"> <td> <input type="text" name="kaito" value="" size="10"> <input type="button" value="計算"> <tr> <td> <input type="text" name="aa" size="5" value="3"> <td> <input type="text" name="bb" size="5" value="4"> <td> <input type="text" name="kaito" size="10"> <input type="button" value="計算"> </tr> </table> </form> <script> //@cc_on @set @mode=(@_jscript_version<9); var A = (function (event) { var e = event./*@if(@mode) srcElement /*@else@*/ target /*@end@*/; var tr; var inp; if ('tasizan' === e.form.id) if ('計算' === e.value) if ((tr = B (e, 'tagName', 'TR'))) if ((inp = tr.getElementsByTagName ('INPUT'))) inp[2].value = (isNaN (inp[0].value)) ? '' : (isNaN (inp[1].value)) ? '' : String (Number (inp[0].value) + Number (inp[1].value)).split(/(?=(?:\d{3})+$)/).join(); }); var B = (function b (node, type, val) { return (node) ? (val == node[type]) ? node : b (node.parentNode, type, val) : null; }); document. /*@if(@mode) attachEvent ('on'+ @else@*/ addEventListener ( /*@end@*/ 'click', A, false); </script>
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 詳しくご教授頂いて大変感謝いたします。 ブラウザで確認させて頂き、動く事が分かりました。 ご教授頂いた式を理解できるように考えていますが、 私が今作っている式がただの足し算ではなく、 複雑でこの他にIF等が入っているため、 この式をあてはめて行くには 超初心者の私が1週間で理解するには 大変情けない話でお恥ずかしいのですが、 難しく到底無理だと感じてしまいました。 ご教授本当にありがとうございます。 こういう式を理解できるようにがんばりたいと思います。 本当にありがとうございました。
- think49
- ベストアンサー率59% (285/482)
そもそも一つの <form> にする必要はないんじゃなイカ? 一つの <form> に複数の問が存在しているのに対して計算時に使用する部品が限定されている事に違和感を感じます。 一つの <form> に一つの問という対応関係にした方がすっきりするんじゃないかな。 …と思うのだけれども、table要素を残したままの上手い構造を思いつきませんでした。 で、妥協案。(IE8- は attachEvent を利用して対応してください) http://jsfiddle.net/BVcr7/ # 蛇足。 HTML5 は空要素を "/" で閉じることを許します。 もし、XHTMLなら thead, tbody の省略はDOMに影響します。
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 説明不足で大変申し訳なかったのですが、 <form> にする必要とないという事ですが、 計算結果をsubmitしてaction post したいと思っています。 またご教授頂いた内容が、私にとって難しくて理解できません。 サンプルリンクを作って頂いてありがとうございます。 クリックしてみましたが私のIEでは動きませんでした。 またattachEventを利用の意味が分かりません。 IE標準の機能でできるように作りたいと思っています。 XHTMLとHTMLの違いを今整理して 直してみます。 頂いた回答を理解できるようにググッたりして調べてみますので、 もう少しお時間を頂いてまたコメントさせて頂きます。 ありがとうございます。
- gorusura
- ベストアンサー率59% (25/42)
ソースを間違えました。 <script type="text/javascript"> (function(form){ window.keisan=function(index){ form.getElementsByName('kaito')[index].value=parseform.getElementsByName('aa')[index].value+form.getElementsByName('bb')[index].value; }; })(document.forms['tasizan']); </script> ↓ <script type="text/javascript"> (function(form){ window.keisan=function(index){ form.getElementsByName('kaito')[index].value=Number(form.getElementsByName('aa')[index].value)+Number(form.getElementsByName('bb')[index].value); }; })(document.forms['tasizan']); </script> 失礼しました。
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 こちらもご教授頂いて感謝いたします。 gorusura様からご教授頂いた getElementsByNameの方が簡単そうな気がしてきました。 私の式に当てはめてみますので もう少しお時間を頂いてまたコメントさせて頂きます。 ありがとうございます。
- gorusura
- ベストアンサー率59% (25/42)
HTMLですか?XHTMLですか? HTMLなら、インライン要素の最後に / を付けないでください。 XHTMLなら、name属性を使わないで下さい。 それと、何のエラーが出ているのでしょうか。 パット見、問題はなさそうに思えます。 ↓このようにした方が良いです。 <script type="text/javascript"> (function(form){ window.keisan=function(index){ form.getElementsByName('kaito')[index].value=parseform.getElementsByName('aa')[index].value+form.getElementsByName('bb')[index].value; }; })(document.forms['tasizan']); </script>
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 XHTMLorHTMLの区別も分からないので HTMLで自分なりに整理してみます。 そのへんも確実にしないとエラーが出たりするようですね。 gorusura様からご教授頂いた回答を自分なりに検討しています のでもう少しお時間を頂いてまたコメントさせて頂きます。 ありがとうございます。
- utun01
- ベストアンサー率40% (110/270)
if(index>1){ ↓ if(index>=1){ じゃないでしょうか。 あと蛇足ですが、dom要素をいろいろ弄るのであればjQueryを使うと何かと楽ですよ。
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 申し訳ありません、私の質問の記述も間違っていまして if(index>1){ はif(index>0){ の誤りです。 if(index>=1){ ももちろんやってみました。 のでif(index>=0){もやってみたのですが、 複数行の時は計算されるのですが1行のみの場合はjavasceiptエラーが出ます。 この他、indexの総数を取得する方法等はありませんでしょうか? たとえばif(index.lenth>0)等、もやってみたのですが動きませんでした。 また何かお気づきになれらましたら、 どうかご教授よろしくお願い致します。 ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
こんにちは。 >具体的に教えて頂けると大変助かります 同じ名前の input 要素が、単数なのか複数なのかで処理を分けているところから起因します。(たぶん) イカ(&たこ)のコードの考え方 [計算]ボタンがクリックされた時、その行にある input 要素を集め計算します。 なので、何行あっても動きます(たぶん) ie8 いかは(&たこ)動きません。 おまけで蛇足付き。 <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <form id="tasizan" action="#" onsubmit="return false;"> <table> <tr> <th>A</th><th>B</th><th>回答</th> <tr> <td> <input type="text" name="aa" size="5" value="1000"> <td> <input type="text" name="bb" size="5" value="2000"> <td> <input type="text" name="kaito" value="" size="10"> <input type="button" value="計算"> <tr> <td> <input type="text" name="aa" size="5" value="3"> <td> <input type="text" name="bb" size="5" value="4"> <td> <input type="text" name="kaito" size="10"> <input type="button" value="計算"> </tr> </table> </form> <script> var A = (function (event) { var e = event.target; var tr; var inp; if ('tasizan' === e.form.id) if ('計算' === e.value) if ((tr = B (e, 'tagName', 'TR'))) if ((inp = tr.getElementsByTagName ('INPUT'))) inp[2].value = (isNaN (inp[0].value)) ? '' : (isNaN (inp[1].value)) ? '' : String (Number (inp[0].value) + Number (inp[1].value)).split(/(?=(?:\d{3})+$)/).join(); }); var B = (function b (node, type, val) { return (node) ? (val == node[type]) ? node : b (node.parentNode, type, val) : null; }); document.addEventListener ('click', A, false); </script>
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 この式は私には難くて、なにをしているのか分かるには 相当時間がかかりそうです。 単にコピペしてブラウザで試しましたが コピペしただけでは動いてくれませんでした。 ただ私の質問の記述も間違っていまして if(index>1){ はif(index>0){ の誤りです。 少しお時間を頂いてbabu_baboo様から頂いた回答を 検討してまた後ほどコメントしたいと思います ほんとうにありがとうございました。。
関連するQ&A
- 動的な表の計算
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります(PHPで表の行が可変します。) name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか? できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- 動的なtableの値を取得したい
いつもお世話になります。 見よう見まねでやっている超初心者です。 下記の様なテーブル(phpで読み込んでいますので実際は動的です。) の回答ボタンをクリックすると テーブル下の<INPUT type="text" name="kotae">に ボタンをクリックされた行のb列の値を入れたいと思っています。 function kaito()をどのように書いたら取得できるか悩んでいます。 初心者なもので具体的な回答でしたら助かります。 ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript
- 自動計算について教えてください
http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。 やりたいのは、商品サンプル3の行の変更です。 この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に 500 が表示され、合計に加算されるようにしたいのです。(商品サンプル3を送料に変更したいのです。送料は注文数によって変更されず、常に500円という設定です) 色々やってみたのですが、どうやってもできません。・・ どなたかアドバイスお願いいたします! <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- セレクトボックスの値から料金を計算したい
お世話になります。 現在、HTML中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。 ------------------------------------------------------------------- <table summary="ご購入内容"> <tr> <th><p>カレンダー</p></th> <td class="price">1,000円(税込)</td> <td class="select"> <input type="hidden" name="field16_name" value="カレンダー" /> <input type="hidden" name="field16_req" value="no" /> <select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();"> <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> </select></td> </tr> </table> <table summary="小計金額"> <tr> <th><p>小計金額</p></th> <td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" /> 円(税込)</td> </tr> <tr> <th><p>送料</p></th> <td> <input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" /> 円(税込)</td> </tr> </table> <table summary="合計金額" class="inner-02 m20"> <tr class="gokei"> <th>合計金額</th> <td> <input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" /> 円(税込)</td> </tr> </table> ------------------------------------------------------------------- <script type="text/javascript"> /* <![CDATA[ */ function keisan(){ /* 商品 */ var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value; var field21_text= parseInt(price1)*1470 ; /* 小計 */ document.form.field21_text.value = addFigure(field21_text); /*送料 */ var price1p = 0; if ( price1 < 2 ) { price1p = price1 * 290; } else { price1p = 0; } var field22_text = parseInt(price1p); if ( field21_text > 5000 ) { field22_text = 0; } document.form.field22_text.value = addFigure(field22_text); /* 合計 */ var field29_text = parseInt(field21_text); document.form.field29_text.value = addFigure(field29_text); function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } } /* ]]> */ </script> ------------------------------------------------------------------- しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。 アンダーバーは利用できないのでしょうか?どこに問題があるのかお教えください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- Javascriptで自動計算の合計の式でエラー
度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 <スクリプト> <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> <HTMLソース> <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'> </td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>
- ベストアンサー
- JavaScript
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 自動計算の追加質問
さきほどいただいた自動計算Scriptありがとうございました。さて英語でのサイトも作っていて、こちらの方は、29.99ドルといった小数点以下の数値を使いたいですが、うまくいきません。いただいたどのスクリプトでも、合計がおかしな数字ででてきてしまうのです。例えば以下のスクリプトで、商品サンプル1を1つ選ぶと合計は36.99であるはずなのに、36.989999999999995と出てしまうのです。 どうしたら良いでしょうか? なにとぞよろしくお願い申し上げます。 <style type="text/css"> table {border-collapse: collapse;} table, th, td {border: 1px #808080 solid;} th, td {padding: 3px 10px;} th {background-color: #d3e9fa;} td {background-color: #ffffff;} td strong {color: #ff0000;} </style> <script> function keisan(){ var price1 = document.form1.goods1.selectedIndex * 29.99; document.form1.field1.value = price1; var price2 = document.form1.goods2.selectedIndex * 6; document.form1.field2.value = price2; var price3 = (price1 || price2) ? 7: 0; document.form1.field3.value = price3; var total = price1 + price2 + price3; document.form1.field_total.value = total; } </script> </head> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">$29.99</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td>$<input type="text" name="field1" size="8" value="0"></td> </tr> <tr> <td>商品サンプル2</td> <td align="right">6</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td>$<input type="text" name="field2" size="8" value="0"></td> </tr> <tr> <td>送料</td> <td align="right">$7</td> <td> </td> <td>$<input type="text" name="field3" size="8" value="0"></td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td>$<input type="text" name="field_total" size="8" value="0"></td> </tr> </table> </form> さきほど二重ポストをしてしまいましたが、このサイト、以前は質問するとすぐに反映されたのですが、いまはすぐに質問が出てこなかったのです。そんなわけで2回同じ質問を投稿してしまいました・・・。そのせいか一度目の質問は勝手に締め切りにされてしまいました。OneOneさん失礼いたしました。。
- ベストアンサー
- JavaScript
- jQueryで行の移動
jQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。 <table id = "table_test"> <tbody id = "test1"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button1" value="テスト1"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test2"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button2" value="テスト2"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test3"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button3" value="テスト3"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> </table> 処理としては、button1を押下したら、<tbody id = "test1">~</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。 trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。 tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか? どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- テーブル行のクリックでチェックボックスの制御
テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>
- 締切済み
- JavaScript
- ジャバスクリプトで作った自動計算フォームが
ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</title> <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</td> <td><select name="goods1" onchange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1(500円)</option> <option value="1000">タイプ2(1,000円)</option> <option value="1500">タイプ3(1,500円)</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 何回も回答頂いてサンプル画面も作って頂いて深く感謝いたします。 本当に超初心者なので 「複数の <form> を作成すればいいんじゃなイカ」 という意味が分かりませんでしたが、サンプル画面を見せて頂き、 ようやくわかりました。こういう方法もあるのですね。 これだとインデックスも必要ないと言う事ですね。 attachEventの件もご丁寧に教えて頂いてありがとうございました。 この方法でやってみようと思います。 ご教授ありがとうございました。