- 締切済み
テーブル内に表示されている数字の自動計算について
初めまして、色々とサイト等を探してみましたが質問させて頂きます。 長文になってしまいますがご教授の程宜しく御願い致します。 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)
ところで、ほそくのがぞうには、「合計」のぎょうが ２つあるんだけど？ そしてさいしょにていじされたものには、それがない！ ？ ますますこんらん。 ばぶぅ～
- babu_baboo
- ベストアンサー率51% (268/525)
けいさんがおわってから、さいしゅうぎょうをこつこつ つくるのは、ちとめんどうなんだけど・・・。 さいしょから、ごうけいぶぶんをつけて、しかも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)
prototype.js系のライブラリーに「Tablekit」というのがありました。 http://www.millstream.com.au/view/code/tablekit/ これを使うと、表のソート、リサイズ、編集(PHPが前提) が動的にできます。 No2.さんのスクリプト全体を関数にして（合計行リセット機能も追加します）、再計算のボタンで呼び出せるようにすれば、簡易表計算の出来上がりです（実際に出来ました）。 EXCELみたいに自動再計算機能もつけるには、イベント処理をもう一工夫する必要がありそう。 どこかで、TABLEの行や列をDOMで追加削除するしかけも見かけたきがします。
- babu_baboo
- ベストアンサー率51% (268/525)
<!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> このまんま、こぴぺしてうごかしてみる。 どうだべかぁ。
- babu_baboo
- ベストアンサー率51% (268/525)
つっこみどころまんさいで、どうかな？ばぶぅ～～～ 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);
補足
早急なご回答ありがとう御座いました。 ただこのJavascriptをどこに記載すれば宜しいのでしょうか？ 大変初歩的なご質問で申し訳御座いませんが教えて頂ければ幸いです。 宜しく御願い致します。
- fujillin
- ベストアンサー率61% (1594/2576)
どうしたいのかがよくわかりません。 ＞サイトを調べて作ってみましたが、 とりあえず現状のコードでもあれば、何をしたいのかが見えてくるかも… （やりたいこととかけ離れていると、かえって混乱するもとになるけど） ＞【ページを表示したら計算され】 何を計算するのかが不明。 ある列だけ加算すればいいのかな？ tableには連結されているセルはないものとしてもよいのかなぁ？ ＞【指定した縦ラインのみ計算】 表示時に自動計算とあるけれど、どうやって指定するのでしょうか？ HTMLソースで指定するの？ そもそもテーブル内の値はどのようにして変化するのでしょうか？ソースを書き換えるのであれば、そのときに一緒に計算しておけばよいのでは？ ＞【プログラムで自動的に列が増えても大丈夫】 Ajaxなどで、動的に書き換えると言う意味でしょうか？ それなら、出力する側で計算結果も併せて出力すればよいのでは？ わざわざボタンを押して（？）計算するというのはなぜだろうか？ ＞【一番右の欄に金額を入れたいのでカンマが入っても計算が出来て ＞表示の状態でカンマが表示される】 値がユーザの手入力だと、書式のチェック等も必要になるのかもしれないし、単にソフトからの出力が3桁区切りだというのなら、単純にカンマを無視して計算してしまえばよさそう。 ＞今の状態だと自動的に列が出来てしまい、合計という文字が左に ＞来てしまったり 何が望ましい状態なのかが不明なので、計算結果をどこに表示したいのかすらわかりません。 （そもそも、どういう計算をしたいのかが不明なので、計算結果も求められないけど） よくわからないながら適当に想像すると、表の一番下に一行付け加えて、一番右の列の合計値を3桁区切りのカンマ入り表示で出したいということなのだろうか… 対象欄は必ず数字が入っているものと仮定できるのだろうか（ｔｈの行は無視するのだろうけれど、他にもそのような行があるのかないのか） 連結セルが、指定列にまたがった場合はどうするのだろうか？何かルールが必要。rwospan指定まで考慮するとなると、少々面倒くさくなると思う。
補足
ご回答ありがとう御座います。 文字数の関係でJavascriptを記載出来ていませんでした。 記載させて頂きます。 <script type="text/javascript"><!-- function tatecalc(tableID) { //記述の手抜き用 var d = document; //非対応ブラウザはなにもしない（最後のはタチの悪いOpera6を刎ねるための条件） if (!d.getElementById || !d.getElementsByTagName || (window.opera && !d.createEvent)) return false; //各<td>の合計値（<td>ごとに別で計算するので配列を使う） var sum = new Array(); //<table id="ID名">を取得 var table = d.getElementById(tableID); //<table>内の<tr>を全部取得（配列） var tr = table.getElementsByTagName("tr"); //===== ループ開始 =====// for (var i = 0; i < tr.length; i++) { //<tr>の数だけ繰り返し //===== tr[i] から計算対象の<td>を取得 =====// var td = tr[i].getElementsByTagName("td"); //i番目の<tr>内にある<td>を全部取得（配列） if (!td || !td.length) //tr[i] に<td>が含まれなかったら次のループへ continue; //2個以上の引数を与えられてるか if (arguments.length > 1) { var temp = new Array(); //一時的な配列 for (var ii = 1; ii < arguments.length; ii++) { //引数[0] は tableID なので 引数[1] から開始 temp[temp.length] = td[arguments[ii]]; //td[ 引数[ii] ] の<td>を一時配列にコピー } td = temp; //<td>の配列を上書き。これによって引数にない列の<td>は消される } //===== <td>の合計値を列ごとに計算 =====// //jは「左からj番目の<td>」に相当。つまり sum[0] は左から0番目の<td>の合計値を指す for (var j = 0; j < td.length; j++) { //<td>の数だけ繰り返し //<td>の内容を列ごとに分けて足していく var num; //計算用の一時変数 if (!sum[j]) { //1回目のループでは sum[j] は空なので0を入れる sum[j] = 0; } //<td>内に文字が入っていて、かつ数字か if (td[j].hasChildNodes() && !isNaN(td[j].firstChild.data)) { num = td[j].firstChild.data; //<td>内の数字を取得 num = parseFloat(num); //数値に変換 num = num *1000; //小数点問題を回避するために適当な整数にする //セルの中身がない時や数字以外が入ってたら0として扱う } else { num = 0; } sum[j] = sum[j] + num; //sum[j] に加算していく（td[j] の合計値になる） //次の<td>ループへ } //次の<tr>ループへ } if (arguments.length == 1) { //引数がひとつの時のみ下のセルに結果を挿入 //新しい行を作る（これに結果の<td>を挿入していき、最後に<table>へ追加する） var newtr = d.createElement("tr"); newtr.style.backgroundColor = "#dfd"; //背景色なんかつけてみる var th = d.createElement("th"); //見出しセルを作る var text = d.createTextNode("結果"); //<th>のテキスト th.appendChild(text); //<th>にテキストを挿入 newtr.appendChild(th); //<tr>の最後に<th>を追加 //結果を入れた<td>を作って<tr>へ次々に追加していく for (i = 0; i < sum.length; i++) { text = (sum[i] >= 0) ? (sum[i] /1000) : ""; //sum[j] を小数に戻す td = d.createElement("td"); td.appendChild(d.createTextNode(text)); //ちょっとズボラな書き方 newtr.appendChild(td); } //新しく作った<tr>を追加 var endtr = tr[tr.length -1]; //一番最後の<tr> endtr.parentNode.insertBefore(newtr, endtr.nextSibling); /* ちょっと解説 追加対象ノード.insertBefore(追加するノード, 追加する場所); <table> ← endtr.parentNode（追加対象ノード） <tr> <td><\/td> <\/tr> <tr> ← endtr <td><\/td> <\/tr> ■ ← endtr.nextSibling（追加する場所） <\/table> */ } return sum; //配列sumを返す } //===== オンロード関数 =====// //スクリプトを全部外部ファイルに入れて window.onload で実行すると、HTMLにコードを書かずにすむので //よりスマートに、よりDOMらしくなります。（オンロードの後でもHTMLを操作できるDOMならではの方法ですね） window.onload = loadComplete; //オンロードで loadComplete() が実行されるようにする //--> </script>
補足
迅速なお答えありがとう御座います！！ ですが少し自分の質問内容が悪かったので【babu_baboo様】には 大変申し訳ありません。 こういう風にはなりませんでしょうか？ ■コチラのようにしたいのです。 http://www.5121atp.com/vew.jpg 大変お忙しい中お手数をおかけいたしますが何卒宜しく御願い致します。