質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1203閲覧

テーブル内の数値を自動で合計

ashh

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/12/01 13:56

###前提・実現したいこと
こちらの記事からテーブル内の数値を合計する事が出来ました。
https://teratail.com/questions/82858

全くの初心者なので可能なのか分かりませんが
ページの読み込みが終わったら、自動で合計を表示する
このような仕様へ変更したいです。

また、表示する際にはエスケープが必要と聞いていたので
今回のケースでも必要なのでしょうか?

必要で有れば、その方法もお願いしたいです。

###発生している問題・エラーメッセージ

###該当のソースコード

<style> #t1 input{text-align:right} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ $('#t1 tbody input').on('change',function(){ var idx=$(this).closest('tr').find('td').index($(this).closest('td')); var sum=0; $(this).closest('tbody').find('tr').each(function(){ var num=parseInt($(this).find('td').eq(idx).find('input').val()); sum+=isNaN(num)?0:num; }); $(this).closest('table').find('tfoot td').eq(idx).find('input').val(sum); }); }); </script> <table id="t1"> <tbody> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr> </tbody> <tfoot> <tr><td i><input type="text" value="0"></td><td><input type="text" value="0"></td><td><input type="text" value="0"></td></tr> </tfoot> </table>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

的外れかもしれませんが、以下のように行ってみてはいかがでっしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 #t1 input { 8 text-align: right 9 } 10 </style> 11 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 12 <script> 13 $(function () { 14 var totals = [0, 0, 0]; 15 16 $("#t1 tbody tr").each(function () { 17 $(this).find("input").each(function (i) { 18 totals[i] += parseInt($(this).val()); 19 }); 20 }); 21 $("#t1 tfoot input").each(function (i) { 22 $(this).val(totals[i]); 23 }); 24 25 $('#t1 tbody input').on('change', function () { 26 var idx = $(this).closest('tr').find('td').index($(this).closest('td')); 27 var sum = 0; 28 $(this).closest('tbody').find('tr').each(function () { 29 var num = parseInt($(this).find('td').eq(idx).find('input').val()); 30 sum += isNaN(num) ? 0 : num; 31 }); 32 $(this).closest('table').find('tfoot td').eq(idx).find('input').val(sum); 33 }); 34 }); 35 </script> 36</head> 37<body> 38<table id="t1"> 39 <tbody> 40 <tr> 41 <td><input type="text" value="5"></td> 42 <td><input type="text" value="6"></td> 43 <td><input type="text" value="8"></td> 44 </tr> 45 <tr> 46 <td><input type="text" value="5"></td> 47 <td><input type="text" value="6"></td> 48 <td><input type="text" value="8"></td> 49 </tr> 50 <tr> 51 <td><input type="text" value="5"></td> 52 <td><input type="text" value="6"></td> 53 <td><input type="text" value="8"></td> 54 </tr> 55 <tr> 56 <td><input type="text" value="5"></td> 57 <td><input type="text" value="6"></td> 58 <td><input type="text" value="8"></td> 59 </tr> 60 <tr> 61 <td><input type="text" value="5"></td> 62 <td><input type="text" value="6"></td> 63 <td><input type="text" value="8"></td> 64 </tr> 65 <tr> 66 <td><input type="text" value="5"></td> 67 <td><input type="text" value="6"></td> 68 <td><input type="text" value="8"></td> 69 </tr> 70 <tr> 71 <td><input type="text" value="5"></td> 72 <td><input type="text" value="6"></td> 73 <td><input type="text" value="8"></td> 74 </tr> 75 </tbody> 76 <tfoot> 77 <tr> 78 <td><input type="text" value="0"></td> 79 <td><input type="text" value="0"></td> 80 <td><input type="text" value="0"></td> 81 </tr> 82 </tfoot> 83</table> 84</body> 85</html>

投稿2017/12/01 14:33

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ashh

2017/12/01 14:59

ご回答ありがとうございます! 表示と同時に合計が出ました。 ですが、出来れば上部に合計を出したいと思い<thead>を作成して$(this).closest('table').find('tfoot td').eq(idx).find('input').val(sum); この部分のtfootをtheadへ変更してもダメでした。 なぜか<tfoot>では表示されています。(変更したのに) 出来れば上部へ表示したいのですが、良い方法は無いでしょうか?
s8_chu

2017/12/01 15:03

今回の質問とは内容が外れてしまうので、別の質問として投稿されてはいかがでしょうか?
ashh

2017/12/01 15:11

$(this).closest('table').find('tfoot td').eq(idx).find('input').val(sum); こちらのtfootをtheadへ変更すれば可能となりました。 ありがとうございます。 あと、エスケープ等は必要ないのでしょうか? 表示する際には、必要と本に書いてあったので・・・・
s8_chu

2017/12/01 15:33

今回の場合は必ずしも必要ではないと思います。
ashh

2017/12/01 15:46

ありがとうございます。 これで安心してサイトに実装できます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問