- ベストアンサー
複数行の計算を可能にする方法
- 初心者の方が作成したHTMLの表で、Javascriptで複数行の計算を可能にする方法について質問があります。
- 質問者は自分なりに色々試しましたがうまくいかず、解決策を教えてほしいとしています。
- 具体的なコードの変更案やアドバイスを求めています。
- chikomaru
- お礼率81% (116/143)
- JavaScript
- 回答数8
- ありがとう数8
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
#5 です。イカ、#5 の補足より引用します。 > <form> にする必要とないという事ですが、計算結果をsuｂmitして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/2280)
>色々考えてみましたがこれでは複数行ある時の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が１つしかなくても常に配列（正確には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等が入っているため、 この式をあてはめて行くには 超初心者の私が１週間で理解するには 大変情けない話でお恥ずかしいのですが、 難しく到底無理だと感じてしまいました。 ご教授本当にありがとうございます。 こういう式を理解できるようにがんばりたいと思います。 本当にありがとうございました。
- think49
- ベストアンサー率59% (285/482)
そもそも一つの <form> にする必要はないんじゃなイカ？ 一つの <form> に複数の問が存在しているのに対して計算時に使用する部品が限定されている事に違和感を感じます。 一つの <form> に一つの問という対応関係にした方がすっきりするんじゃないかな。 …と思うのだけれども、table要素を残したままの上手い構造を思いつきませんでした。 で、妥協案。(IE8- は attachEvent を利用して対応してください) http://jsfiddle.net/BVcr7/ # 蛇足。 HTML5 は空要素を "/" で閉じることを許します。 もし、XHTMLなら thead, tbody の省略はDOMに影響します。
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 説明不足で大変申し訳なかったのですが、 <form> にする必要とないという事ですが、 計算結果をsuｂmitして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){もやってみたのですが、 複数行の時は計算されるのですが１行のみの場合は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様から頂いた回答を 検討してまた後ほどコメントしたいと思います ほんとうにありがとうございました。。
お礼
ご回答ありがとうございます。 頂いた式を 私の式に当てはめて考えています。 ただお恥ずかしいのですが 私の知識が乏しく、お恥ずかしいのですが、 私がやろうと思っている 式に当てはめて考えるのはもう少し時間が かかりそうです。 理解できて式にするまでには時間がかかりそうですので お礼が遅くなってしまい申し訳ないので、 この質問は一旦これで締めきりさせていただきたいと 思います。 ご教授ありがとうございます。 心より感謝申し上げます。 また何かありましあら是非よろしくお願い致します。
補足
ご回答ありがとうございます。 何回も回答頂いてサンプル画面も作って頂いて深く感謝いたします。 本当に超初心者なので 「複数の <form> を作成すればいいんじゃなイカ」 という意味が分かりませんでしたが、サンプル画面を見せて頂き、 ようやくわかりました。こういう方法もあるのですね。 これだとインデックスも必要ないと言う事ですね。 attachEventの件もご丁寧に教えて頂いてありがとうございました。 この方法でやってみようと思います。 ご教授ありがとうございました。