電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：noname#125207
  • 質問日時：
  • 回答数：11件

はじめまして。
やりたいことは、まさに下記で質問されている通りなのですが↓
http://okwave.jp/qa5295498.html

同じページに複数のテーブルがあって、それぞれに合計を出したい場合、上記ではid指定なので同ページに複数テーブルを配置できません。
1ページ内の同一のクラス名（たとえばclass="table01"）のテーブルに、それぞれ合計を表示させたいのですが、その場合はどうしたらよろしいのでしょうか？
どなたかお詳しい方、ご教示くださいm(_ _)m

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (11件中1～10件)

No.11ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#2です。



#7の補足の例示を見ました。セルの連結などがなく、4列目を合計するという限定版で作成してみました。普通の整数値と仮定しています。
全体のHTMLの構成がどうなっているのか不明なので、適当に想定しています。また、合計値は対象の表が
　<table class="table01">
　　　　……
　</table>
とあるとして、そのすぐ後ろに
　<div class="table_wrap">合計　xx,xxx円</div>
として追加されます。（3桁区切りが思ったより面倒だった）

全体のレイアウトがどの様になされているのかが不明でしたので、合計値はclass="table_wrap"に対するCSSでレイアウトしてください。
↓のサンプルでは、例としてスタイルシートで太字・赤文字にしています。

<html>
<head>
<style type="text/css">
.table_wrap { font-weight:bold; color:red; }
</style>

<script type="text/javascript">
window.onload = function(){
var tbl = document.getElementsByTagName('TABLE');
for (var i=0; i<tbl.length; i++){
if (tbl[i].className.match(/table01/)) {
var total = 0, e = tbl[i], tr, td, tmp, t, div;
tr = e.getElementsByTagName('TR');

for (j=0; j<tr.length; j++) {
td = tr[j].getElementsByTagName('TD');
if (td[3] && !isNaN(tmp = td[3].innerHTML.replace(/,/g,''))) total += parseInt(tmp);
}
t = '';
while (total>=1000) {
tmp = '00' + (total % 1000);
t = ',' + tmp.substr(tmp.length-3) + t;
total = Math.floor(total/1000);
}
if (total) t = '' + total + t;
if (t.substring(0, 1)==',') t = t.substring(1);
div = document.createElement('DIV');
div.appendChild(document.createTextNode('合計 ' + t + '円'));
div.className = 'table_wrap';
e.parentNode.insertBefore(div,e.nextSibling);
}
}
}
</script>
</head>

<body>
<table class="table01" border="1">
<caption>2009年9月</caption>
<tr><th>A</th><th>B</th><th>C</th>
<th>金額</th><th>E</th><th>F</th></tr>
<tr><td>11</td><td>12</td><td>13</td>
<td>1,000</td><td>15</td><td>16</td></tr>
<tr><td>21</td><td>22</td><td>23</td>
<td>2,000</td><td>25</td><td>26</td></tr>
<tr><td>31</td><td>32</td><td>33</td>
<td>1,000</td><td>35</td><td>36</td></tr>
</table>
<hr>
<table class="table01" border="1">
<caption>2009年10月</caption>
<tr><th>A</th><th>B</th><th>C</th>
<th>金額</th><th>E</th><th>F</th></tr>
<tr><td>41</td><td>42</td><td>43</td>
<td>4,000</td><td>45</td><td>46</td></tr>
<tr><td>51</td><td>52</td><td>53</td>
<td>3,000</td><td>55</td><td>56</td></tr>
<tr><td>61</td><td>62</td><td>63</td>
<td>2,000</td><td>65</td><td>66</td></tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

こちらも試させていただいたところ、パーフェクトにできました！
今回はあまりにも無知な自分を恥ずかしく思いました。基礎からやり直して、いただいたコードをちゃんと理解したいと思います。
本当に助かりました。ありがとうございます！

通報する
お礼日時：2009/10/03 02:32

No.10

  • 回答者： babu_baboo
  • 回答日時：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<title></title>
<div style="width:500px;">
<table border="1" class="table0">
<caption>2009/9</caption>
<tr><th>金額</th></tr>
<tr><td>1234</td></tr>
<tr><td>4321</td></tr>
</table>

<table border="1" class="table0">
<caption>2009/9</caption>
<tr><th>金額</th></tr>
<tr><td>12345</td></tr>
<tr><td>43210</td></tr>
</table>
</div>
<script type="text/javascript">

(function ( d, css ) {
var ts = d.getElementsByTagName( 'table' ), i = 0, r;
while( r = ts[ i++ ] ) {
if( r.className !== css ) continue;
var g = 0, j = 0, c, v, b, s = r.rows;
while( c = (s[ j++ ] || {}).cells ) {
v = c[ c.length - 1 ].firstChild.nodeValue.replace(/,/g, '');
if( (b = c) && !isNaN( v ) ) g += +v;
}
var P = d.createElement( 'P' ), Q = r.parentNode;
P.style.textAlign = 'right';
P.appendChild( d.createTextNode( '合　計　' + g + '円' ) );
r.nextSibling ? Q.insertBefore( P, r.nextSibling ): Q.appendChild( P );
}
})(document, 'table0');

</script>
ばぶ。。。。zzzzz.
    • good
    • 0
    • 件
通報する
この回答へのお礼

今試させていただきましたらできました！
無知なまま質問してしまい申し訳ありません。
このたびいただいたソースを自分なりに理解して、次回からはお話についていけるように努力してから質問します。
本当に助かりました。ありがとうございました。

通報する
お礼日時：2009/10/03 02:29

No.9

  • 回答者： babu_baboo
  • 回答日時：

(function ( d ) {


　var ts = d.getElementsByTagName( 'table' ), i = 0, r;
　while( r = (ts[ i++ ] || {}).rows ) {
　　var g = 0, j = 0, c, v, b;
　　while( c = (r[ j++ ] || {}).cells ) {
　　　v = c[ c.length - 1 ].firstChild.nodeValue.replace(/,/g, '');
　　　if( (b = c) && !isNaN( v ) ) g += +v;
　　}
　　b[ b.length - 1 ].firstChild.nodeValue = g;
　}
})(document);
くらすをしらべるのは、めんどうなので、とりあえずここまで。
えくせるみたいなしていでけいさん、けっこう、こころみとしてはうけると
おもったのになぁ～
ざんねん。

この回答への補足

さきほどのリンク切れになっていました。すみません
http://sky.geocities.jp/undertest555/

補足日時：2009/10/02 21:23
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

色々ありがとうございます。
皆さんからいただいたソースを元にトライしてみます。
なんどもありがとうございましたm(_ _)m

通報する
お礼日時：2009/10/02 21:26

No.8

  • 回答者： fujillin
  • 回答日時：

#2です。



＞今の自分のレベルでは理解できないので、～～
であるなら、idを指定する方が簡単ではないのかなぁ。

＞やりたいことは、まさに下記で質問されている通りなのですが
＞同じページに複数のテーブルがあって、それぞれに合計を出したい場
＞合、上記ではid指定なので同ページに複数テーブルを配置できません。
で、１つならもう出来ているとしするなら、そのスクリプトをfunctionにしてidを渡してあげればよいだけです。

1.すでに出来ているものがあるとして、それがqa5295498.htmlのようなも
　のなら、直接のスクリプトになっていますから、まずそれをfunction(){}
　で囲みます。
　function keisan(id){
　//ここにすでに出来ているスクリプト
　}
（すでにfunctionになっている場合は()内にカンマ区切りで引数を追加する
　だけでよい。↑例では引数をidとしているが、好きな変数名で可）

2.作成したスクリプトを引数（id）で指定した要素に対して実行されるよう
　にする。
　keisanの中身（=すでにできているスクリプト）のid指定の部分を変数id
　に置き換える。
　例えば、既存のid指定が'table1'ならこの部分を変数idに変更

以上で、keisan（）は指定したidの要素（=表）に対して実行されるようになります。

3.複数の表に対して実行するには
　質問文からでは、実行するタイミングが不明ですが、実行したい時に
　keisan('table1');
　みたいにするだけで、id="table1"の表に対して実行されます。続けて
　keisan('table2');
　とすることで、、id="table2"の表に対しても計算がなされます。
　表がいくつあっても、その分だけ1行追加すればよいだけ。

4.表がすごく沢山あるなら、その部分もまとめることも可能ですね。
　単に、table1、table2…　みたいな連番のidならば、もっとも簡単で、
　keisan('table' + n);
　みたいにしておいて、nを1から必要な数までループすればよいだけです。


以上が、#2の最初に述べた方法。
他にもいろいろあるだろうけれど、サンプルの中身を理解するよりは遥かに簡単だと思う。
class指定でやるにしても、結局は似たようなことなんだけど…
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
こちらで一度トライしてみますm(_ _)m
なんどもありがとうございました。

通報する
お礼日時：2009/10/02 21:23

No.7

  • 回答者： babu_baboo
  • 回答日時：

classめいというけれど、それはごうけいをかきこむばしょなの？


けいさんする、せるはどのれつなの？　していがないよ？
というか、どうするの？
もしcolspanとかrowspanとかしていされてたらどうする？
しつもんぶんからだけでは、わからないじょ！
なので、どくじしようにつっぱしってるわけ。

この回答への補足

わかりにくくてすみません。
下記に画像をアップしています。それぞれの表の下に金額の合計が出るようにしたいです。とりあえず下に合計がでれば、画像の通りでなくても、最終行のどこかのセルに入る、というのでも構いません。
http://sky.geocities.jp/undertest555/001.gif

赤文字は注意書きです。
これはブログ形式で、記事を更新するとテーブルの行が増えていきます。
また、月ごとにテーブルを分けますので、2009年9月、2009年10月の下には11月、12月と、どんどん同フォーマットのテーブルが自動的に増えて行きます。
テーブルAとテーブルBのテンプレートは同じですので、それぞれにidを振り分けることができません。（プログラムを使えばできるのかもしれませんが、そこまで詳しくないもので。すみません）
よって、今はテンプレートに、テーブルのクラスをclass="table01"としています。そのため、テーブルAとテーブルBは同じクラス名（table01）となっています。今後増えるテーブルも同様にクラス名はtable01となります。
参考にさせていただいた
http://okwave.jp/qa5295498.html
を流用したところ、テーブルと合計を入れるセルがidで指定してあったので、それをclass名で指定できたら、と思いました。

補足日時：2009/10/02 20:37
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： babu_baboo
  • 回答日時：

れんとうすみません。

ちょっとなおしたけど、いけてないのは
おなじですね。;_;

<script type="text/javascript">

var calc = (function ( comma, get ) {
　return function ( ansId, fstr ) {
　　var ans = document.getElementById( ansId );
　　var table = get( ans, 'nodeName', 'TABLE');

　　if(! table ) return;
　　var f = fstr.replace( /(r([0-9]+)c([0-9]+))/g,
　　　(function (_tb) {
　　　　return function (dmy0, dmy1, r, c) {
　　　　　try {
　　　　　　var v = _tb.rows[+r].cells[+c].firstChild.nodeValue.replace( /,/g, '');
　　　　　　return isNaN( v ) ? 0: v;
　　　　　} catch(e) {
　　　　　　return 0;
　　　　　}
　　　　};
　　　})(table)
　　);
　　ans.firstChild.nodeValue = comma( eval( f ) );
　};
})(
　function ( num ) {
　　return (''+num).replace(/^(-?[0-9]+)(?=\.|$)/, function(s){ return s.replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g, '$1,');});
　},
　function (node, type, val) {
　　return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null;
　}

)



calc( 'total', 'r1c5 + r2c5 + r3c5' );
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

babu_babooさま
色々ありがとうございます。お手数おかけしています。下にも書いておりますがidではなくclass名にて動作することはできますでしょうか？
皆さんとは比べ物にならないくらい知識がありませんので、もう少し勉強します。本当にありがとうございますm(_ _)m

通報する
お礼日時：2009/10/02 19:54

No.5

  • 回答者： babu_baboo
  • 回答日時：

ふとおもいついたままかいてみたけど、だめだなあこれ。


えくせるみたいにすうしきでけいさんするやつです。
もじがあったりするとだめです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title></title>

<table id="table1" border="1">
<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>

<script type="text/javascript">

var calc = (function () {
　var reg = /(r([0-9]+)c([0-9]+))/g;
　
　return function ( tbId, ansId, fstr ) {
　　var table = document.getElementById( tbId );
　　var ans = document.getElementById( ansId );
　　
　　if( !table || 'TABLE' !== table.nodeName ) return;
　　var f = fstr.replace( reg,
　　　(function (_tb) {
　　　　return function () {
　　　　　var r = +arguments[2]; if( 'number' !== typeof r ) return 0;
　　　　　var c = +arguments[3]; if( 'number' !== typeof c ) return 0;
　　　　　var v;
　　　　　try {
　　　　　　v = _tb.rows[r].cells[c].firstChild.nodeValue.replace(/,/g,'');
　　　　　　return ( 'number' === typeof +v ) ? v: 0;
　　　　　} catch(e) {
　　　　　　return 0;
　　　　　}
　　　　};
　　　})(table)
　　);
　　ans.firstChild.nodeValue = eval( f );
　};
})()



calc( 'table1', 'total', 'r1c5 + r2c5 + r3c5' );
</script>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

HTML5で


elements = document.getElementsByClassName(name)
elements = eleement.getElementsByClassName(name)
というのがあるそうで、
現時点でFirefox3.0以上では使えます。IEはだめそう
他のブラウザーは？です。
"getElementByTag"は知りません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。document.getElementsByClassName(name)をIDの部分に置き換えてやってみたのですがうまく行きません（涙）
やり方がまずいのかもしれませんのでもう少しやってみます。

通報する
お礼日時：2009/10/02 19:44

No.3

  • 回答者： babu_baboo
  • 回答日時：

だれかつっこめぇ～


getElementByTag
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

＞上記ではid指定なので同ページに複数テーブルを配置できません。


idを引数にして渡すとか、いくらでも手はありそうな気がしますが、それはご質問の内容とは違うので置いといて…

ご質問の方は、そのままtableのなかからclassがtable01のものを探せばよいのでは？

(1)簡単にやるなら（文字列のマッチで）
var elm = document.getElementsByTagName('TABLE');
for (i=0; i<elm.length; i++) {
if (elm[i].className.match(/table01/)) {
//elm[i]が該当するtableのDOM。これに対して処理を行う。
}
}

(2)マッチよりきちんと比較するなら、
var elm = document.getElementsByTagName('TABLE');
for (i=0; i<elm.length; i++) {
var j = -1, r = 0, cl = elm[i].className.split(' ');
while (cl[++j]) if (cl[j]=='table01') { r = 1; break; }
if (r) {
//elm[i]が該当するtableのDOM。これに対して処理を行う。
}
}

みたいな感じでどうでしょうか？
上の(1)と(2)の意味するところの違いを理解してください。
（1でミスするケースはどのようなものか？）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。今の自分のレベルでは理解できないので、いただいたソースをみてもう少し勉強してみます。

通報する
お礼日時：2009/10/02 19:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報