JavaScriptを使用してHTMLのテーブルの合計を計算する方法について

2023/08/03 18:45

このQ&Aのポイント

JavaScriptのファイルを使用してHTMLのテーブルの数値を取得し、合計を計算する方法について教えてください。
HTMLのテーブルの数値をカンマ区切りの文字列から取得する際、JavaScriptのコードを使用してカンマを取り除く方法について教えてください。
HTMLのテーブルの数値を計算する際、JavaScriptのコードを使用して合計を計算し、最後の行に表示する方法について教えてください。

ベストアンサー

jsファイルを使用して計算したいのですが。

2007/05/17 15:05

現在以下のようにカンマの取り外しを行い、計算しています。 <HTML> <script type="text/javascript">  function goukei() { 1 = Number(comma_delete(document.all("1").innerText)); 2 = Number(comma_delete(document.all("2").innerText)); 3 = Number(comma_delete(document.all("3").innerText)); add = String(1 + 2 + 3); document.all("4").innerText = comma_add(add); }  function comma_delete(n) { hairetsu = ''; mojiretsu = n.length; for (i=0; i<mojiretsu; i++){ if(n.substr(i,1) != ','){ hairetsu = hairetsu + n.substr(i,1); } } return hairetsu; }  function comma_add(n) { hairetsu = ''; mojiretsu = n.length; amari = mojiretsu - Math.floor(mojiretsu / 3) * 3; for (i=0; i<mojiretsu; i++){ if((i - Math.floor(i / 3) * 3) == amari && i != 0){ hairetsu = hairetsu + ','; } hairetsu = hairetsu + n.substr(i,1); } return hairetsu; } // --> </script> <BODY onload="goukei()"> <TABLE border="1"> <TR><TH>Ａ</TH><TD ID="1" align="right">111</TD></TR> <TR><TH>Ｂ</TH><TD ID="2" align="right">1,000</TD></TR> <TR><TH>Ｃ</TH><TD ID="3" align="right">10,000</TD></TR> <TR><TH>合計</TH><TD ID="4" align="right"></TD></TR> </TABLE> </BODY> </HTML> scriptをjsファイルで呼び出して計算したいのですが、 <TR><TH>Ａ</TH><TD ID="1" align="right">111</TD></TR> <TR><TH>Ｂ</TH><TD ID="2" align="right">1,000</TD></TR> <TR><TH>Ｃ</TH><TD ID="3" align="right">10,000</TD></TR> <TR><TH>Ｄ</TH><TD ID="4" align="right">100,000</TD></TR> <TR><TH>Ｅ</TH><TD ID="5" align="right">1000,000</TD></TR> <TR><TH>合計</TH><TD ID="6" align="right"> このようにBODYのテーブルの数が変わっても、一番最後のIDが合計と判断し、正しく計算出来る方法無いでしょうか？宜しくお願いします。

ljungberg
お礼率100% (4/4)

JavaScript
回答数2
ありがとう数2

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

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2007/05/17 15:56 回答No.2

つっこみどころが多いソースですね。 idに数字だけいれるのはご法度なので最低限やめたほうがよいでしょう。無理やりフローを考えると、idになにか指定されてるtdの中身を集計して、最後のtdに入れ込む・・・って感じでしょうか。元ソースを活かすとこんな感じかなぁ・・ <HTML> <head> <script type="text/javascript"> window.onload=function() { var tds=document.getElementsByTagName("td"); var add=0; for(var i=0;i<tds.length;i++){ if(tds[i].id!=""){ add += Number(comma_delete(tds[i].innerHTML)); var last_td=tds[i]; } } last_td.innerHTML=comma_add(String(add)); } function comma_delete(n) { ・・・ } function comma_add(n) { ・・・ } </script> </head> <BODY> <TABLE border="1" id="t1"> <TR><TH>Ａ</TH><TD ID="x1" align="right">111</TD></TR> <TR><TH>Ｂ</TH><TD ID="x2" align="right">1,000</TD></TR> <TR><TH>Ｃ</TH><TD ID="x3" align="right">10,000</TD></TR> <TR><TH>Ｄ</TH><TD ID="x4" align="right">100,000</TD></TR> <TR><TH>Ｅ</TH><TD ID="x5" align="right">1000,000</TD></TR> <TR><TH>合計</TH><TD ID="x6" align="right"></TABLE> </BODY> </HTML>

質問者

お礼 2007/05/18 13:30

回答ありがとうございます。

質問者

補足 2007/05/18 13:30

すいません、間違えて確認に進んでしまいました。おかげ様で出来ました。また数字だけ入れたりはしない方が良いのですね！以後気を付けたいと思います。ありがとうございました。

その他の回答 (1)

noname#44015

2007/05/17 15:40 回答No.1

document.getElementById(id)で指定した要素がない場合戻り値はnullとなるらしい． http://javascript.g.hatena.ne.jp/keyword/getElementById 6が最後なら6+1はnullになるはず．

質問者

お礼 2007/05/18 13:34

回答ありがとうございます。読んだだけではまだよく分からなかったので、勉強してみます。

関連するQ&A

初めからカンマが付いている数を計算したいのですが。
以下のようにテーブル内の数、A,B,Cを足して、Ｄに合計を出したいのですがカンマを付けて表示させる方法がありますでしょうか？ <HTML> <script type="text/javascript">  </script> <BODY onload="goukei()"> <TABLE border="1"> <TR><TH>Ａ</TH><TH ID="A">1,001</TH></TR> <TR><TH>Ｂ</TH><TH ID="B">10,010</TH></TR> <TR><TH>Ｃ</TH><TH ID="C">100,100</TH></TR> <TR><TH>合計</TH><TH ID="D"></TH></TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- JavaScript
楽天ブログで表を書いたら上部の余白が消せません。
ホームページからコピーして文字位置を変えただけなのに、上部に余白が出来てしまい、消そうとしてｂｏｄｙタグを使ったら使用禁止で使えません。どこが悪いのでしょうか？＜コピーして自分で書いたもの＞ <center> <table border=1> <tr> <th>●●●</th> <th>●●●</th> <th>●●●</th> <th>●●●</th> </tr> <tr> <td align=center>●●●</td> <td align=right>●●●</td> <td align=right>●●●</td> <td align=right>●●●</td> </tr> <tr> <td align=center>●●●</td> <td align=right>●●●</td> <td align=right>●●●</td> <td align=right>●●●</td> </tr> <tr> <td align=center>●●●</td> <td align=right>●●●</td> <td align=right>●●●</td> <td align=right>●●●</td> </tr> </table></center>
- 締切済み
- ブログ
JavaScriptの質問です。
JavaScriptの質問です。下記フォームで、１番が入力されると、２、３番目のエリアがグレーになって入力不可になる方法を教えてください。 <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid" id="shopid" /></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area" /></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business" /></td> </tr> <tr> よろしくお願いします。
- ベストアンサー
- JavaScript
テーブル内に表示されている数字の自動計算について
初めまして、色々とサイト等を探してみましたが質問させて頂きます。長文になってしまいますがご教授の程宜しく御願い致します。 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> 大変難しい説明ではありますが何卒宜しく御願い致します。
- 締切済み
- JavaScript
ＣＳＶファイルより自動でＨＴＭＬ形式で表示したい。
ＣＳＶファイルより自動でＨＴＭＬ形式で表示したいのです。たとえば、csv　ファイルの中身が、 room.csv 部屋名,温度,湿度,料金 101,23.5,40,15000 102,23.2,40,16000 103,23.0,40,17000 104,23.4,40,19000 となっているとします。 room.htmlでもroom.cgi 等で表示させブラウザのソースを見たときには、 <table border=4 width=250 align=center> <tr bgcolor="#cccccc"> <th>部屋名</th> <th>温度</th> <th>湿度</th> <th>料金</th> </tr> <tr align=center> <td>101</td> <td>23.5</td> <td>40</td> <td>15000</td> </tr> <tr align=center> <td>102</td> <td>23.2</td> <td>40</td> <td>16000</td> </tr> <tr align=center> <td>103</td> <td>23.0</td> <td>40</td> <td>17000</td> </tr> <tr align=center> <td>104</td> <td>23.4</td> <td>40</td> <td>19000</td> </tr> </table> のように、したいのですが、可能でしょうか？ｐｅｒｌ等のプログラムの知識は、ほとんどありません。作ってあるものをアップロードして動くようにすることは、出来ます。
- 締切済み
- ホームページ作成ソフト
ＴＤタグをスタイルシートを使って綺麗に簡単に書きたい。
二つほど質問があります… 以下のようなcssとhtmlを書きました。 ○stylesheet.css body{background-color:#ffffff} a:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} ○XXX.html <html> <head> <meta http-equiv="text/html" contents="Shift_JIS"/> <link rel="stylesheet" href='../css/stylesheet.css' type="text/css"/> </head> <body> <table border> <tr> 　<th> </th> 　<th>XXXXXX</th> 　<th>XXXXXX</th> 　<th>XXXXXX</th> </tr> <tr> 　<th>XXXXXX</th> 　<td align="right"><a href="###.html">100</a></td> 　<td align="right"><a href="###.html">525</a></td> 　<td align="right"><a href="###.html">300</a></td> </tr> <tr> 　<th>XXXXXX</th> 　<td align="right"><a href="###.html">10</a></td> 　<td align="right"><a href="###.html">150</a></td> 　<td align="right"><a href="###.html">300</a></td> </tr> </table> </body> </html> 質問１ <td>は全て数値で、必ず右寄せ（align="right"）なのですが、 stylesheet.cssの中に書いてしまいたいのです…でも td{align:right} と記述しても右寄せしてくれません…どう書くのが正しいのでしょうか？質問２マウスカーソルをリンクに合わせると文字が反転するようになっているのですができる事ならtdタグの空白部分も反転したほうが良いと思うのですが td:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} としても駄目で <a href="###.html"><td align="right">100</td></a> とするとリンクが無くなってしまいました… 上手く実行できるようになりますでしょうか？できればJavaScriptを使いたくないんです… わがままな質問ですが、回答よろしくお願いします。
- ベストアンサー
- HTML
JS テーブルのデータをシャッフルするには？
JavaScript テーブルのデータをシャッフルするには？ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルするにはどんなコードでできますか？要は、テーブル内容をランダムに並べ替える、ということです。＜仕様＞・ボタンを押すごとにテーブル内を並べ替える・thの内容は固定・並べ替えるのは tbody tdの内容 [HTML] <button id="button1">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table>
- 締切済み
- JavaScript
JS テーブルデータ：シャッフル関数の修正
JavaScript テーブルデータ：シャッフル関数の不具合を修正するには？ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルする関数を作ってみました。どこをどのように修正したらよいのでしょうか？今のところ、下記の不具合があります。 ■ 行のシャッフルは出来るが、列のシャッフルがされていない　（すべてのＴＤ内のシャッフルをしたい）＜仕様＞・ボタンを押すごとにテーブル内を並べ替える・thの内容は固定・並べ替えるのは tbody tdの内容 [HTML] <button id="button2">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table> <script> //試作中 document.getElementById("button2").onclick = function (){ Array.prototype.shuffle = function(){ var t=this,a=t.length,b=[],c=a,i,r; for(i=0;i<a;i++)b[i]=t[i]; for(i=0;i<a-1;i++){ r=Math.floor(Math.random()*c); t[i]=b[r];b[r]=b[c-1];c--; } t[a-1] = b[0]; return t; }; var subject = document.querySelector("#table5 tbody"); var rowData = []; var rows = subject.getElementsByTagName("TR"); var cells; var i, j; for (i=0; i<rows.length; i++) { rowData[i] = []; cells = rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { rowData[i][j] = cells[j].innerHTML; } } rowData.shuffle(); for (i=0; i<rowData.length; i++) { cells=rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { cells[j].innerHTML = rowData[i][j]; } } } </script>
- ベストアンサー
- JavaScript
JS 簡単なコードで表を転置できますか？
JavaScript 簡単なコードで表を転置できますか？ここに１つのテーブルがあります。これを簡単なコードで転置できますか？ここにいう転置とは、表のセルについて、(m×n行列) => (n×m行列) に変換することです。＜仕様＞・テーブルの列と行を入れ替える・文字は横書きのままで変更なし・Vanilla JS で ( jQuery 無用 ) ・チェックボックスでトグル <div><input type="checkbox" id="menu">転置</div> <div class="container"> <table id="table2" border="1"> <caption>世界の高い山トップ10</caption> <thead> <tr><th>順位</th><th>山の名称</th><th>標高 (ｍ)</th></tr> </thead> <tbody> <tr><td> 1位</td><td>エベレスト</td><td>8,848</td></tr> <tr><td> 2位</td><td>Ｋ２</td><td>8,611</td></tr> <tr><td> 3位</td><td>カンチェンジュンガ</td><td>8,586</td></tr> <tr><td> 4位</td><td>ローツェ</td><td>8,516</td></tr> <tr><td> 5位</td><td>マカルー</td><td>8,485</td></tr> <tr><td> 6位</td><td>チョ・オユー</td><td>8,201</td></tr> <tr><td> 7位</td><td>ダウラギリ</td><td>8,167</td></tr> <tr><td> 8位</td><td>マナスル</td><td>8,163</td></tr> <tr><td> 9位</td><td>ナンガ・パルバット</td><td>8,126</td></tr> <tr><td>10位</td><td>アンナプルナ</td><td>8,091</td></tr> </tbody> </table> </div>
- ベストアンサー
- JavaScript
二の表の値の計算をしたい。
いつもお世話になります。見よう見まねでやっている超初心者です。下の様なテーブルが二つあるページでテーブルabcの<td>のリンゴ、なす、西瓜の数値をテーブルefgのリンゴ、なす、西瓜の元値の値に対して+-してその売値の数値をを自動で計算して求めたいと思っています。 <td>?</td>（(）内の回答のように）表の値はどちらも可変します。 jabascriptでなるべくシンプルで簡単にできないでしょうか？ご教授の程、どうぞよろしくお願い致します。 <table id="abc"> <tr> <th>リンゴ</th> <th>なす</th> <th>西瓜</th> </tr> <tr> <td>-20</td> <td>-10</td> <td>+200</td> </tr> </table> <table id="efg"> <tr> <th >ID</th> <th>果物</th> <th>元値</th> <th>売値</th> </tr> <tr> <td>1</td> <td>リンゴ</td> <td>140</td> <td>?(120)</td> </tr> <tr> <td>2</td> <td>リンゴ</td> <td>120</td> <td>?(100)</td> </tr> <tr> <td>3</td> <td>なす</td> <td>40</td> <td>?(30)</td> </tr> <tr> <td>4</td> <td>なす</td> <td>80</td> <td>?(70)</td> </tr> <tr> <td>5</td> <td>すいか</td> <td>800</td> <td>?(1000)</td> </tr> <tr> <td>6</td> <td>すいか</td> <td>1000</td> <td>?(1200)</td> </tr> </table>
- ベストアンサー
- JavaScript

JavaScriptを使用してHTMLのテーブルの合計を計算する方法について

jsファイルを使用して計算したいのですが。