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

前提・実現したいこと

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

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

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

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

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

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <script type="text/javascript" src="js/jquery-3.4.1.min.js" charset="UTF-8"></script>
9  <script type="text/javascript" src="js/jquery-ui.js"></script>
10  <script type="text/javascript" src="js/system_demo.js"></script>
11</head>
12<body>
13
14<table class="table table-bordered">
15  <thead>
16    <th>品名</th>
17    <th>単価合計：<input type="text" id="SumUnit" value="600" disabled></th>
18    <th>個数合計：<input type="text" id="Sumnumber" value="48" disabled></th>
19    <th>合計：<input type="text" id="SumTotal" value="648" disabled></th>
20  </thead>
21  <tbody>
22    <tr>
23      <td><input type="text" value="りんご"></td>
24      <td><input type="text" data-group="Unit"  value="100"></td>
25      <td><input type="text" data-group="number"  value="8"　></td>
26      <td><input type="text" data-group="Total"  value="108" disabled></td>
27    </tr>
28    <tr>
29      <td><input type="text" value="にんじん"></td>
30      <td><input type="text" data-group="Unit"  value="200"></td>
31      <td><input type="text" data-group="number"  value="16"></td>
32      <td><input type="text" data-group="Total"  value="216" disabled></td>
33    </tr>
34    <tr>
35      <td><input type="text" value="肉"></td>
36      <td><input type="text" data-group="Unit"  value="300"></td>
37      <td><input type="text" data-group="number"  value="24"></td>
38      <td><input type="text" data-group="Total"  value="324" disabled></td>
39    </tr>
40  </tbody>
41</table>
42<button class="btn btn-danger">追加</button>
43
44
45</body>
46</html>
47

JavaScript
1$(function(){
2  var DoSum = function(self){
3     var GROUP = self.data('group');
4     var SUM = 0;
5
6      $("[data-group='"+ GROUP +"']").each(function(index){
7          SUM = SUM + Number($(this).val());
8      });
9
10      $("#Sum" + GROUP).val(SUM);
11  };
12
13  // テーブル内のinputを変更した場合
14  $('table').on('change', '[data-group]', function(){
15      DoSum($(this));
16  });
17
18  $('button').click(function(){
19    $('tbody').after(
20      '<tr>'
21      +'<td><input type="text" value=""></td>'
22      +'<td><input type="text" data-group="Unit"  value=""></td>'
23      +'<td><input type="text" data-group="Tax"  value=""></td>'
24      +'<td><input type="text" data-group="Total"  value=""></td>'
25      +'</tr>'
26    );
27  });
28});

試したこと

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

行動規範の内容に同意します

回答3件

ベストアンサー

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

javascript
1  const Group = ['Unit', 'number', 'Total'];
2  $('table').on('change', '[data-group]', function(){
3    for(let i=0; Group.length > i; i++){
4      var SUM = 0;
5      var GROUP = Group[i];
6      $("[data-group='"+ GROUP +"']").each(function(index){
7        SUM = SUM + Number($(this).val());
8      });
9      $("#Sum" + GROUP).val(SUM);
10    }
11  });
12

投稿2019/07/18 02:06

kabanoki

総合スコア28

sss0930

2019/07/18 02:10

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

行動規範の内容に同意します

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

投稿2019/07/17 21:23

rcftdbeu

総合スコア167

sss0930

2019/07/17 22:45

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

行動規範の内容に同意します

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

JavaScript
1  $('button').click(function(){
2    $('tbody').append(
3      '<tr>'
4      +'<td><input type="text" value=""></td>'
5      +'<td><input type="text" data-group="Unit" value=""></td>'
6      +'<td><input type="text" data-group="number" value=""></td>'
7      +'<td><input type="text" data-group="Total" value=""></td>'
8      +'</tr>'
9    );
10  });
11```**動くサンプル：**[https://jsfiddle.net/yohjfd29/](https://jsfiddle.net/yohjfd29/)
12
13---
14
15
16【jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita】
17[https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9#append](https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9#append)
18
19【.append() | jQuery API Documentation】
20[https://api.jquery.com/append/](https://api.jquery.com/append/)