each文で前の値を次の値に加算していく処理

Question

viewでこんな感じのテーブルを作ろうと思います。
（TotalカラムにCountカラムの数値を加算していく。）

No.	Count	Total
1	10	10
2	30	40
3	20	60
4	50	110
5	10	120

@count = [[1,10],[2,30],[3,20],[4,50],[5,10]]
よくわからないので、とりあえずviewにこう書きます。

<table>
  <tr>
    <th>No.</th>
    <th>Count</th>
    <th>Total</th>
  </tr>
  <% @count.each do |f| %>
  <tr>
    <td><%= f[0] %></td>
    <td><%= f[1] %></td>
    <td><%= f[1] %></td>
  </tr>
  <% end %>
</table>

結果：

No.	Count	Total
1	10	10
2	30	30
3	20	20
4	50	50
5	10	10

一旦このようにして、あとはスクリプトでtotalセルの値をいじればいいのかなと考えました。

考え方：
0. totalのセルをまとめて取得
0. 変数に初期値を設定
0. 今のセルの値を変数に入れる
0. セルの値を保存して次に渡す
0. 今のセルの値に前のセルの値を足す
0. セルの値を保存して次に渡す…

教えていただきたいこと

まず、上記の考え方で正しいのか（実現できるのか）が知りたいです。
そして、この場合のスクリプトの書き方が具体的に知りたいです。←初心者なので特にここを教えていただきたいです
あと、他に効率よく上記のテーブルを作る方法があったら知りたいです。

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

Comments

[yambejp]

なにで処理したいのでしょうか？js,rubyそれともSQL？

Answer 1

こんなRubyコードでも配列が取得できます。

counts = [[1, 10], [2, 30], [3, 20], [4, 50], [5, 10]]

counts.each_with_object([]).with_index do |((_id, count), sum), index|
  sum << (sum[index-1] || 0) + count
end

=> [10, 40, 60, 110, 120]

Comments

[Gr.]

alpさん
回答ありがとうございます！
そんなやりかたがあったのですね！勉強になります。
この方法でうまくいきました！
１つわからないのですが、
sum << (sum[index-1] || 0) + count
この部分はつまりどういうことなのでしょうか？

[退会済みユーザー]

sum配列に足し合わせた値を追加しています。

(sum[index-1] || 0) は、一つまえのsum配列の値を取得しています。
nilの場合は0を使うようにしています。

------------
1回目のループ
_id: 1
count: 10
index: 0
sum[index-1]: nil
------------
2回目のループ
_id: 2
count: 30
index: 1
sum[index-1]: 10
------------
3回目のループ
_id: 3
count: 20
index: 2
sum[index-1]: 40
------------
4回目のループ
_id: 4
count: 50
index: 3
sum[index-1]: 60
------------
5回目のループ
_id: 5
count: 10
index: 4
sum[index-1]: 110

[Gr.]

「nilの場合は0を使う」。この部分がわかりませんでしたが、おかげさまで理解できました！
ありがとうございました！

Answer 2

jQuery版

<script>
$(function(){
  $('#t1 td').each(function(x){
    if(x>3 && x%3==2){
      $(this).text($('#t1 td:lt('+x+'):nth-child(3n+2):gt(0)').map(function(){
        return parseInt($(this).text());
      }).get().reduce(function(p, c){
        return p + c;
      }));
    }
  });
});
</script>

<table id="t1">
<tr><td>No.</td><td>Count</td><td>Total</td></tr>
<tr><td>1</td><td>10</td><td></td></tr>
<tr><td>2</td><td>30</td><td></td></tr>
<tr><td>3</td><td>20</td><td></td></tr>
<tr><td>4</td><td>50</td><td></td></tr>
<tr><td>5</td><td>10</td><td></td></tr>
</table>

調整版

前回すこしロジックがくどかったので調整しました

$(function(){
  $('#t1 td:nth-child(3n):gt(0)').each(function(){
    var idx=$('#t1 td').index(this);
    var v1=parseInt($('#t1 td').eq(idx-1).text());
    var v2=parseInt($('#t1 td').eq(idx-3).text())|0;
    $(this).text(v1+v2);
  });
});

※解説

• 「$('#t1 td:nth-child(3n):gt(0)')」：テーブルの2列目の2行目以降のtdをとる
• idxにそのtdのテーブル全体におけるインデックスを取る
• v1に自分の前の列のtdの値をとる
• v2に自分の上の行のtdの値をとる、その際parseIntがNaNだったときは0を返す
• 自分のtdの値をv1とv2の和とする

Comments

[Gr.]

yambejpさん
回答ありがとうございます！
情報足りなくて失礼いたしました。jQuery版で大丈夫です。

if(x>3 && x%3==2){　の箇所や
$(this).text($('#t1 td:lt('+x+'):nth-child(3n+2):gt(0)').map(function(){　の箇所など、
自分のレベルではとても複雑に思えるコードで、解説をいただきたいのですがよろしいでしょうか。
簡単にでもいいので、上から全体的に説明していただけると助かります。
お手数おかけしてすみません。

[yambejp]

ちょっとくどかったので調整版をあげて解説をつけておきました

[Gr.]

調整版と解説の追記、ありがとうございました！
勉強になりました！