- ベストアンサー
表の合計値
どこかのサイトでcsvファイルを読み込み、行末に合計値を表示するサンプルを見たことはあるのですが、下記のようなことは可能でしょうか。 ＃単にテーブルに表示されている数値の合計値を、行末に表示する。csvファイルは使わないで、テーブルから値を取得して合計を★に表示する。 <TABLE BORDER="1"> <TR><TD>りんご</TD><TD>80</TD></TR> <TR><TD>みかん</TD><TD>35</TD></TR> <TR><TD>合計</TD><TD>★</TD></TR> </TABLE>
- s-holmes
- お礼率47% (767/1609)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
では例によってIE限定で...(^^; <HTML> <HEAD> <TITLE></TITLE> <script language="JavaScript"><!-- // Sample.1 // いちいちTDにidを埋め込む方式～表のレイアウトに依存しない function sum1(){ var i; var ans = 0; for (i = 0; i < document.all.num.length; i++) { ans += parseFloat(document.all.num[i].innerText); } document.write(ans); } // Sample.2 // 列固定で強引に計算する方式～表のレイアウトに依存する function sum2() { var ans = 0; var targetCol = 2; //2列目を対象として var startRow = 1; //1行目から計算 var rows = 0; var row = 0; var col = 0; var i,j,nbr; var tbl = document.getElementById("tbl"); for (i = 0; i < tbl.childNodes.length; i++) { if (tbl.childNodes[i].nodeName == "TBODY") { tbl = tbl.childNodes[i]; break; } } for (i = 0; i < tbl.childNodes.length; i++) { if (tbl.childNodes[i].nodeName == "TR") rows++; } for (i = 0; i < tbl.childNodes.length; i++) { if (tbl.childNodes[i].nodeName == "TR") { row++; if ((row >= startRow) && (row < rows)) { col = 0; obj = tbl.childNodes[i]; for (j = 0; j < obj.childNodes.length; j++) { if (obj.childNodes[j].nodeName == "TD") { col++; if (col == targetCol) { if (!isNaN(nbr = obj.childNodes[j].childNodes[0].nodeValue)) { ans += parseFloat(nbr); } } } } } } } document.write(ans); } //--> </script> </HEAD> <BODY> <TABLE BORDER="1"> <TR><TD>りんご</TD><TD id="num">80</TD></TR> <TR><TD>みかん</TD><TD id="num">35</TD></TR> <TR><TD>合計</TD><TD><script>sum1();</script></TD></TR> </TABLE> <TABLE BORDER="1" id="tbl"> <TR><TD>りんご</TD><TD>80</TD></TR> <TR><TD>みかん</TD><TD>35</TD></TR> <TR><TD>合計</TD><TD><script>sum2();</script></TD></TR> </TABLE> </BODY> </HTML> ただ、こういう静的なものはHTMLエディタのマクロか何かで処理すべきと思います。(私はFrontPage使いなので…^^;)
その他の回答 (2)
- ittochan
- ベストアンサー率64% (2667/4137)
ANo.#1だとデータが増えると 記述が大変なので・・・・ これは、合計欄をクリックすると再計算します。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function t3_onclick() { t3.value = parseInt(t1.value)+parseInt(t2.value); } //--> </SCRIPT> </HEAD> <BODY> <TABLE BORDER="1"> <TR><TD>りんご</TD><TD><INPUT id=t1 size=5 value=80></TD></TR> <TR><TD>みかん</TD><TD><INPUT id=t2 size=5 value=35></TD></TR> <TR><TD>合計</TD><TD><INPUT id=t3 size=5 LANGUAGE=javascript onclick="return t3_onclick()"></TD></TR> </TABLE> </BODY> </HTML>
お礼
回答ありがとうございました。 このサンプルは、値を入れると合計を計算するというような使い方の場合にも使えるので活用させていただきます。
- ittochan
- ベストアンサー率64% (2667/4137)
これでは駄目？ <HTML> <HEAD> <TITLE>s-holmesさんへ</TITLE> <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript> <!-- function t1_onchange() { sum(); } function t2_onchange() { sum(); } function sum() { t3.value = parseInt(t1.value)+parseInt(t2.value); } //--> </SCRIPT> </HEAD> <BODY> <TABLE BORDER="1"> <TR><TD>りんご</TD><TD><INPUT id=t1 size=5 value=80 LANGUAGE=javascript onchange="return t1_onchange()"></TD></TR> <TR><TD>みかん</TD><TD><INPUT id=t2 size=5 value=35 LANGUAGE=javascript onchange="return t2_onchange()"></TD></TR> <TR><TD>合計</TD><TD><INPUT id=t3 size=5></TD></TR> </TABLE> </BODY> </HTML>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
回答ありがとうございました。 このサンプルは、質問した目的にぴったりのもので、これからのいろいろな作成の際に活用させていただきます。