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

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

ただいまの
回答率

89.64%

全ての項目の合計を、列ごとに自動計算して表示したい。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 647

sss0930

score 9

前提・実現したいこと

現在、値段と個数から金額を計算するテーブルを作成していて、
1箇所でも変更、もしくは計算ボタンなどをクリックすると
全体的に数値が再計算されるようなものを目指していますが、
動的に行が追加されるフォームで計算がうまくいかず、困っています。

https://www.kabanoki.net/3132/
上記のページを参考にフォームの大枠は完成したのですが、
例えば2列目の「単価」を変更しても、
4列目の「合計」にはその変更による結果が反映されません。

なんとなくfunction(self)のselfあたりで
変更した項目と同じ列しか計算処理が行われていないのだと思うのですが、
かわりの対処法がどれもうまくいかず、
書籍やGoogleで調べては途方に暮れています。

1箇所変更・もしくは計算ボタンなどをクリックすれば
全項目の数値が再計算されるようにするには
どのようにJavascriptを変更すれば良いのか、ご教示いただけないでしょうか。

よろしくお願いいたします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="js/jquery-3.4.1.min.js" charset="UTF-8"></script>
  <script type="text/javascript" src="js/jquery-ui.js"></script>
  <script type="text/javascript" src="js/system_demo.js"></script>
</head>
<body>

<table class="table table-bordered">
  <thead>
    <th>品名</th>
    <th>単価合計:<input type="text" id="SumUnit" value="600" disabled></th>
    <th>個数合計:<input type="text" id="Sumnumber" value="48" disabled></th>
    <th>合計:<input type="text" id="SumTotal" value="648" disabled></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="りんご"></td>
      <td><input type="text" data-group="Unit"  value="100"></td>
      <td><input type="text" data-group="number"  value="8" ></td>
      <td><input type="text" data-group="Total"  value="108" disabled></td>
    </tr>
    <tr>
      <td><input type="text" value="にんじん"></td>
      <td><input type="text" data-group="Unit"  value="200"></td>
      <td><input type="text" data-group="number"  value="16"></td>
      <td><input type="text" data-group="Total"  value="216" disabled></td>
    </tr>
    <tr>
      <td><input type="text" value="肉"></td>
      <td><input type="text" data-group="Unit"  value="300"></td>
      <td><input type="text" data-group="number"  value="24"></td>
      <td><input type="text" data-group="Total"  value="324" disabled></td>
    </tr>
  </tbody>
</table>
<button class="btn btn-danger">追加</button>


</body>
</html>
$(function(){
  var DoSum = function(self){
     var GROUP = self.data('group');
     var SUM = 0;

      $("[data-group='"+ GROUP +"']").each(function(index){
          SUM = SUM + Number($(this).val());
      });

      $("#Sum" + GROUP).val(SUM);
  };

  // テーブル内のinputを変更した場合
  $('table').on('change', '[data-group]', function(){
      DoSum($(this));
  });

  $('button').click(function(){
    $('tbody').after(
      '<tr>'
      +'<td><input type="text" value=""></td>'
      +'<td><input type="text" data-group="Unit"  value=""></td>'
      +'<td><input type="text" data-group="Tax"  value=""></td>'
      +'<td><input type="text" data-group="Total"  value=""></td>'
      +'</tr>'
    );
  });
});

試したこと

[data-group='"+ GROUP +"']の部分をそれぞれ直接指定して
ページ内に「計算」ボタンを追加して
on clickで全てのdata-groupを計算するように変更してみたり
全く別のコードもいくつかトライしてみたのですが、
動的に行数が増えるせいか、どれもうまくいきませんでした。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

1つの入力で全グループを再計算させるには、以下で動作すると思います。

  const Group = ['Unit', 'number', 'Total'];
  $('table').on('change', '[data-group]', function(){
    for(let i=0; Group.length > i; i++){
      var SUM = 0;
      var GROUP = Group[i];
      $("[data-group='"+ GROUP +"']").each(function(index){
        SUM = SUM + Number($(this).val());
      });
      $("#Sum" + GROUP).val(SUM);
    }
  });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/18 11:10

    こちらの方法で全グループを再計算できました。本当に助かりました。
    この機会にJavascriptを再度学習しようと思います。ありがとうございました。

    キャンセル

+2

動的に追加された行の個数合計入力欄のdata-groupがTaxになっています.
numberに変更することで動作します.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/18 07:45

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

    Tax をnumberに変えてもnumberの列だけ計算され、他の列は計算されませんでした…
    例えばnumberの列の数値に変更を加えたら
    unitやtotalのdata-groupも再計算されるようにするには
    どのように変更すればいいでしょうか。
    現在は入力をしたdata-groupしか計算されないコードになっているようです。
    ご教示頂けると大変助かります。
    よろしくお願いします。

    キャンセル

0

tbodyの配下に追加するならappendです。(おそらくHTMLの構文上おかしいので動かないのだと思います)

  $('button').click(function(){
    $('tbody').append(
      '<tr>'
      +'<td><input type="text" value=""></td>'
      +'<td><input type="text" data-group="Unit" value=""></td>'
      +'<td><input type="text" data-group="number" value=""></td>'
      +'<td><input type="text" data-group="Total" value=""></td>'
      +'</tr>'
    );
  });

動くサンプル:https://jsfiddle.net/yohjfd29/


【jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita】
https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9#append

【.append() | jQuery API Documentation】
https://api.jquery.com/append/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる