締切済み

テーブル内に表示されている数字の自動計算について

2009/09/16 19:23

初めまして、色々とサイト等を探してみましたが質問させて頂きます。長文になってしまいますがご教授の程宜しく御願い致します。 Javascriptでボタンを押して計算するタイプはあるのですが【ページを表示したら計算され】しかも【指定した縦ラインのみ計算】する【プログラムで自動的に列が増えても大丈夫】【一番右の欄に金額を入れたいのでカンマが入っても計算が出来て表示の状態でカンマが表示される】の様なタイプのものを作ろうと思いサイトを調べて作ってみましたが、今の状態だと自動的に列が出来てしまい、合計という文字が左に来てしまったり不要な縦の合計が出てしまったりとすごく不便です。大変難しいご質問ですが何卒宜しく御願い致します ■現在のタグ <div class="example"> <div class="result"> <table class="cols6" id="table1" frame="box" border="1" cellpadding="3"> <tr> <th>No</th> <th>日付</th> <th>名前</th> <th>使用</th> <th>店舗名</th> <th>金額</th> </tr> <tr> <th>1</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>2980</td> </tr> <tr> <th>2</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>2,980</td> </tr> <tr> <th>3</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>3500</td> </tr> </table> </div> </div> </body> </html> 大変難しい説明ではありますが何卒宜しく御願い致します。

dj-ta-ki
お礼率0% (0/6)

JavaScript
回答数6
ありがとう数7

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

みんなの回答

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

2009/09/17 18:21 回答No.6

ところで、ほそくのがぞうには、「合計」のぎょうが２つあるんだけど？そしてさいしょにていじされたものには、それがない！？ますますこんらん。　ばぶぅ～

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

2009/09/17 17:21 回答No.5

けいさんがおわってから、さいしゅうぎょうをこつこつつくるのは、ちとめんどうなんだけど・・・。さいしょから、ごうけいぶぶんをつけて、しかもidをふったりすると、らくなのでそうしたじょ！れつばんごうしていなら、もっとかんたんになるのにね^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <div class="example"> <div class="result"> <table class="cols6" id="table1" frame="box" border="1" cellpadding="3"> <tr> <th>No</th> <th>日付</th> <th>名前</th> <th>使用</th> <th>店舗名</th> <th>金額</th> </tr> <tr> <th>1</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>2980</td> </tr> <tr> <th>2</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>2,980</td> </tr> <tr> <th>3</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>3500</td> </tr> <tr> <td colspan="4"> </td> <td>合計</td> <td id="total"> </td> </tr> </table> </div> </div> <script> function c3 ( num ) { 　return (''+num).replace(/^(-?[0-9]+)(?=\.|$)/, function(s){ return s.replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g, '$1,');}); } var c=0, t = 0, tb = document.getElementById( 'table1' ), o, s; while(o = tb.rows[ c++ ]) { 　if(s = o.cells[o.cells.length-1]) 　　if(s = s.firstChild) 　　　if(! isNaN(s = s.nodeValue.replace(/,/g,'')) ) t += s - 0; } document.getElementById('total').firstChild.nodeValue = c3(t); </script>

yyr446
ベストアンサー率65% (870/1330)

2009/09/17 16:45 回答No.4

prototype.js系のライブラリーに「Tablekit」というのがありました。 http://www.millstream.com.au/view/code/tablekit/ これを使うと、表のソート、リサイズ、編集(PHPが前提) が動的にできます。 No2.さんのスクリプト全体を関数にして（合計行リセット機能も追加します）、再計算のボタンで呼び出せるようにすれば、簡易表計算の出来上がりです（実際に出来ました）。　EXCELみたいに自動再計算機能もつけるには、イベント処理をもう一工夫する必要がありそう。　どこかで、TABLEの行や列をDOMで追加削除するしかけも見かけたきがします。

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

2009/09/17 15:42 回答No.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>表の右端だけを合計する</title> <div class="example"> <div class="result"> <table class="cols6" id="table1" frame="box" border="1" cellpadding="3"> <tr> <th>No</th> <th>日付</th> <th>名前</th> <th>使用</th> <th>店舗名</th> <th>金額</th> </tr> <tr> <th>1</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>2980</td> </tr> <tr> <th>2</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>2,980</td> </tr> <tr> <th>3</th> <td>2009/09/16</td> <td>てすと</td> <td>備品購入</td> <td>文房具店</td> <td>3500</td> </tr> </table> </div> </div> <script> function c3 ( num ) { 　return (''+num).replace(/^(-?[0-9]+)(?=\.|$)/, function(s){ return s.replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g, '$1,');}); } var c=0, t = 0, tb = document.getElementById( 'table1' ), o, s; while(o = tb.rows[ c++ ]) { 　if(s = o.cells[o.cells.length-1]) 　　if(s = s.firstChild) 　　　if(! isNaN(s = s.nodeValue.replace(/,/g,'')) ) t += s - 0; } o = tb.getElementsByTagName('th')[0].parentNode.cloneNode(true); tb.getElementsByTagName('tbody')[0].appendChild(o); o = tb.rows[tb.rows.length-1]; o.cells[o.cells.length-1].innerHTML = c3(t); </script> このまんま、こぴぺしてうごかしてみる。　どうだべかぁ。

質問者

補足 2009/09/17 16:35

迅速なお答えありがとう御座います！！ですが少し自分の質問内容が悪かったので【babu_baboo様】には大変申し訳ありません。こういう風にはなりませんでしょうか？ ■コチラのようにしたいのです。 http://www.5121atp.com/vew.jpg 大変お忙しい中お手数をおかけいたしますが何卒宜しく御願い致します。

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

2009/09/17 10:37 回答No.2

つっこみどころまんさいで、どうかな？ばぶぅ～～～ function c3 ( num ) { 　return (''+num).replace(/^(-?[0-9]+)(?=\.|$)/, function(s){ return s.replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g, '$1,');}); } var c=0, t = 0, tb = document.getElementById( 'table1' ), o, s; while(o = tb.rows[ c++ ]) { 　if(s = o.cells[o.cells.length-1]) 　　if(s = s.firstChild) 　　　if(! isNaN(s = s.nodeValue.replace(/,/g,'')) ) t += s - 0; } o = tb.getElementsByTagName('th')[0].parentNode.cloneNode(true); tb.getElementsByTagName('tbody')[0].appendChild(o); o = tb.rows[tb.rows.length-1]; o.cells[o.cells.length-1].innerHTML = c3(t);

質問者

補足 2009/09/17 14:03

早急なご回答ありがとう御座いました。ただこのJavascriptをどこに記載すれば宜しいのでしょうか？大変初歩的なご質問で申し訳御座いませんが教えて頂ければ幸いです。宜しく御願い致します。

fujillin
ベストアンサー率61% (1594/2576)

2009/09/16 20:32 回答No.1

どうしたいのかがよくわかりません。＞サイトを調べて作ってみましたが、とりあえず現状のコードでもあれば、何をしたいのかが見えてくるかも… （やりたいこととかけ離れていると、かえって混乱するもとになるけど）＞【ページを表示したら計算され】何を計算するのかが不明。　ある列だけ加算すればいいのかな？ tableには連結されているセルはないものとしてもよいのかなぁ？＞【指定した縦ラインのみ計算】表示時に自動計算とあるけれど、どうやって指定するのでしょうか？ HTMLソースで指定するの？そもそもテーブル内の値はどのようにして変化するのでしょうか？ソースを書き換えるのであれば、そのときに一緒に計算しておけばよいのでは？＞【プログラムで自動的に列が増えても大丈夫】 Ajaxなどで、動的に書き換えると言う意味でしょうか？それなら、出力する側で計算結果も併せて出力すればよいのでは？わざわざボタンを押して（？）計算するというのはなぜだろうか？＞【一番右の欄に金額を入れたいのでカンマが入っても計算が出来て＞表示の状態でカンマが表示される】値がユーザの手入力だと、書式のチェック等も必要になるのかもしれないし、単にソフトからの出力が3桁区切りだというのなら、単純にカンマを無視して計算してしまえばよさそう。＞今の状態だと自動的に列が出来てしまい、合計という文字が左に＞来てしまったり何が望ましい状態なのかが不明なので、計算結果をどこに表示したいのかすらわかりません。（そもそも、どういう計算をしたいのかが不明なので、計算結果も求められないけど）よくわからないながら適当に想像すると、表の一番下に一行付け加えて、一番右の列の合計値を3桁区切りのカンマ入り表示で出したいということなのだろうか… 対象欄は必ず数字が入っているものと仮定できるのだろうか（ｔｈの行は無視するのだろうけれど、他にもそのような行があるのかないのか）連結セルが、指定列にまたがった場合はどうするのだろうか？何かルールが必要。rwospan指定まで考慮するとなると、少々面倒くさくなると思う。

質問者

補足 2009/09/16 21:08

ご回答ありがとう御座います。文字数の関係でJavascriptを記載出来ていませんでした。記載させて頂きます。 <script type="text/javascript"> </script>

テーブル内に表示されている数字の自動計算について