はじめまして。
やりたいことは、まさに下記で質問されている通りなのですが↓
http://okwave.jp/qa5295498.html
同じページに複数のテーブルがあって、それぞれに合計を出したい場合、上記ではid指定なので同ページに複数テーブルを配置できません。
1ページ内の同一のクラス名(たとえばclass="table01")のテーブルに、それぞれ合計を表示させたいのですが、その場合はどうしたらよろしいのでしょうか?
どなたかお詳しい方、ご教示くださいm(_ _)m
No.11ベストアンサー
- 回答日時:
#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>
こちらも試させていただいたところ、パーフェクトにできました!
今回はあまりにも無知な自分を恥ずかしく思いました。基礎からやり直して、いただいたコードをちゃんと理解したいと思います。
本当に助かりました。ありがとうございます!
No.10
- 回答日時:
<!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.
今試させていただきましたらできました!
無知なまま質問してしまい申し訳ありません。
このたびいただいたソースを自分なりに理解して、次回からはお話についていけるように努力してから質問します。
本当に助かりました。ありがとうございました。
No.9
- 回答日時:
(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);
くらすをしらべるのは、めんどうなので、とりあえずここまで。
えくせるみたいなしていでけいさん、けっこう、こころみとしてはうけると
おもったのになぁ~
ざんねん。
No.8
- 回答日時:
#2です。
>今の自分のレベルでは理解できないので、~~
であるなら、idを指定する方が簡単ではないのかなぁ。
>やりたいことは、まさに下記で質問されている通りなのですが
>同じページに複数のテーブルがあって、それぞれに合計を出したい場
>合、上記ではid指定なので同ページに複数テーブルを配置できません。
で、1つならもう出来ているとしするなら、そのスクリプトを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指定でやるにしても、結局は似たようなことなんだけど…
No.7
- 回答日時:
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名で指定できたら、と思いました。
No.6
- 回答日時:
れんとうすみません。
ちょっとなおしたけど、いけてないのはおなじですね。;_;
<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>
babu_babooさま
色々ありがとうございます。お手数おかけしています。下にも書いておりますがidではなくclass名にて動作することはできますでしょうか?
皆さんとは比べ物にならないくらい知識がありませんので、もう少し勉強します。本当にありがとうございますm(_ _)m
No.5
- 回答日時:
ふとおもいついたままかいてみたけど、だめだなあこれ。
えくせるみたいにすうしきでけいさんするやつです。
もじがあったりするとだめです。
<!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>
No.4
- 回答日時:
HTML5で
elements = document.getElementsByClassName(name)
elements = eleement.getElementsByClassName(name)
というのがあるそうで、
現時点でFirefox3.0以上では使えます。IEはだめそう
他のブラウザーは?です。
"getElementByTag"は知りません。
ありがとうございます。document.getElementsByClassName(name)をIDの部分に置き換えてやってみたのですがうまく行きません(涙)
やり方がまずいのかもしれませんのでもう少しやってみます。
No.2
- 回答日時:
>上記では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でミスするケースはどのようなものか?)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML の、テーブルのセルの可変...
-
データバインドで生成したテー...
-
表内の列や行の結合に関して
-
特定<table>内の<td>の色を変える
-
マウスをブラウザの外に出した...
-
onclickで画像と文字を別々の場...
-
▲▲JavaScriptに詳しい人見てく...
-
Excelで作ったhtmlファイルのサ...
-
プルダウンで選択すると、DBの...
-
CSVデータをツリー表示させたい
-
dataTablesのテーブルの内容が...
-
data-hrefでのcolorbox設定方法
-
PC情報の調べ方教えてください。
-
JavaScriptで特定のtdタグにcla...
-
\\u30ad\\u30fc\\u30dc・・・と...
-
テキストだけonCllickを検知したい
-
時間の計算について
-
ハイパーリンクを別ウインドウ...
-
動的なtableの値を取得したい
-
PERL
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
マウスをブラウザの外に出した...
-
Selenium.ChromeDriverの使い方...
-
「オブジェクトは、このプロパ...
-
リンク色の変更
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
テーブル内に表示されている数...
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
おすすめ情報