- ベストアンサー
表の合計値
どこかのサイトで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>
関連するQ&A
- HTMLのテーブル内容を配列にするには
<html> <head></head> <body> <table border="0"> <tr> <td>りんご</td> <td>100円</td> </tr> <tr> <td>みかん</td> <td>80円</td> </tr> <tr> <td>もも</td> <td>160円</td> </tr> </table> </body></html> 上のような内容のHTMLページを読み込み、 テーブルの一番左の行（りんご、みかん、もも）の内容を @list=("りんご","みかん","もも"); このように配列に代入したいのですが、 どうすればいいでしょうか。よろしくお願いします。
- ベストアンサー
- Perl
- 二の表の値の計算をしたい。
いつもお世話になります。 見よう見まねでやっている超初心者です。 下の様なテーブルが二つあるページで テーブル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
- htmlを使って表を作っています
自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか？わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか？ 練習問題と自分が作ったソース載せます。 <html> <h4><b>１問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">～</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 ＜第一問：幅400、高さ400、上のセルの数が２つ、下のセルの数が２つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。＞ どうですか？うまく表示されましたか？ レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">～</table> ・<tr bgcolor="★">～</tr> ・<td bgcolor="★">～</td> ★には色指定値(例：#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列（一行）に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 ＜第二問：幅50、高さ50、１つのセルのテーブル全体の背景を赤くしてみましょう。 赤→#ff0000＞ ＜第三問：幅150、高さ100、上のセルを３つ、下のセルを３つのテーブルを作り、 上３つのセルの背景を青くしてみましょう。 青→#0000ff＞ ＜第四問：幅100、高さ100、上のセルを２つ、下のセルを２つのテーブルを作り、 左上のセルの背景を緑にしてみましょう。 緑→自分で見つけて下さい＞
- 締切済み
- ホームページ作成ソフト
- テーブルをテーブルで囲う意味はありますか？
<table border=1> <tr><td> <table border=1> <tr><td> a </td><td> b </td></tr> </table> </td> </tr> </table> このようにテーブルをテーブルで囲う意味はありますか？ ｈｔｍｌの勉強をしていて、 ネット上でテーブルのサンプルを拾ったのですが、 上記のようにテーブルをテーブルで囲んでました。 この方法でサイト上に１００個くらいテーブルを作ってしまったのですが 今更ながらこういう書き方に意味はあるのかな？ と思い始めてきました。 意味はあるのでしょうか？
- ベストアンサー
- HTML
- テーブルの枠線の色を指定したい。
http://www.kanzaki.com/docs/html/htminfo16.html を参考に、 --------------------------------------- <table> <tr> <td>りんご</td> <td>甘酸っぱい</td> <td>おおむね赤</td> </tr> <tr> <td>なつみかん</td> <td>かなり酸っぱいと思う</td> <td>たいてい黄色</td> </tr> </table> --------------------------------------- と言うテーブルに対して、 --------------------------------------- <style> table { border-collapse: collapse; } td { border: solid 1px; padding: 0.5em; } </style> --------------------------------------- と記述して、枠線を付けたのですが、枠線の色を指定する事は出来ますか？ 赤にしたいです。ご回答よろしくお願いします。
- ベストアンサー
- HTML
- テーブル内に２つのテーブルを作成した場合の位置の固定
ＨＴＭＬでテーブルの中に２つのテーブルを作成しました。 簡単に書くと以下のような感じです。 <table border="1"> <tr> <td align="center" valign="top"> <table border="1"> <tr> <td>hogehoge</td> </tr> </table> <br> <br> <table border="1"> <tr> <td>mogomogo</td> </tr> </table> </td> </tr> </teble> テーブル内の一つ目のテーブルをテーブルの上部に、もうひとつのテーブルをテーブル内の下部に表示したいのですがよい方法があるでしょうか？
- ベストアンサー
- HTML
- 二つのテーブルを横に並べて表示するにはどうすれば
"<table border=10><tr><td>test</td></tr></table><table border=10><tr><td>test</td></tr></table>" のように、テーブルを二つ表示させたい時に test test と、縦に並んでブラウザに表示されてしまうのですが testtest のように、二つのテーブルを横に並べて表示するにはどうすればよいでしょうか？
- ベストアンサー
- HTML
- 表を指定した場所で改行する方法
<table border='1' align='left'> <tr><td>テスト</td></tr> </table> まず上記のように表を作ったとします。 これをCGIで追加すると下記のようにHTML上で横方向に自動的に同じ表が作られて表示されます。 <table border='1' align='left'> <tr><td>テスト</td></tr> </table> <table border='1' align='left'> <tr><td>テスト</td></tr> </table> <table border='1' align='left'> <tr><td>テスト</td></tr> </table> <table border='1' align='left'> <tr><td>テスト</td></tr> </table> これを途中で例えば3番目で改行させたい場合はどうすればいいのでしょうか？。 分かりづらいですがよろしくお願いします。
- 締切済み
- CGI
- tableの中にtableを作りスクロールさせたい。
tableの中にtableを作りスクロールさせたい。 tableの中にtableを作りスクロールさせたいのですが、書きサンプルで思うようになりません。 table一つなら上手くいくのですが、どこが悪いでしょうか。 <html lang="ja"> <head> <title></title> </head> <body> <table border="1" width="100%"><tr><td></td></tr> <tr> <td > <div style="height:40%;width:100%;overflow-y:scroll;"> <table border=1 width="100%" bgcolor="#9999ff"> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> </table> </div> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- CSV形式の表の内容をHTMLファイルのTABLEに表示する方法は？
どうしてもわからず困っています。どなたかおわかりの方がいらっしゃいましたら、是非お教えください。 ●CSVファイル(data.csv)の内容が下記の場合、 品番,商品名,価格 0001,りんご,100 0002,いちご,150 0003,すいか,200 ●HTMLファイル(index.html)に以下のように表示したいです。 <table> <tr><th>品番</th><th>商品名</th><th>価格</th></tr> <tr><td>0001</td><td>りんご</td><td>100</td></tr> <tr><td>0002</td><td>いちご</td><td>150</td></tr> <tr><td>0003</td><td>すいか</td><td>200</td></tr> </table> データバインドという方法もあるようなのですが、IE以外のブラウザでは表示できないみたいなのです。 できれば、IE,Firefox,サファリの最新版での表示ができればと思いますので、それ以外の方法(php,xmlなど?)でできればと思います。 わかりづらい説明で申し訳ないです。 宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
お礼
回答ありがとうございました。 このサンプルは、質問した目的にぴったりのもので、これからのいろいろな作成の際に活用させていただきます。