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

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

ただいまの
回答率

90.45%

  • JavaScript

    21057questions

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

  • Python

    12369questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • jQuery

    8384questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Django

    1707questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript, jQuery 月間売上テーブルで店舗ごとの小計と全店舗総合計を出したい(Python / Django)

解決済

回答 2

投稿 編集

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

liverty

score 50

概要

フロント:HTML5, CSS, JavaScript, jQuery
バックエンド:python(3.7.1)、Django(2.1)
にて、Webアプリを学習しながら作っています。

店舗別、月別の売上高、変動比率、固定費をテーブルで保持し、利益を計算したものを一つの表に出力しています。店舗は2つです。

この表の中で、各店舗合計と総合計(2店舗合計)を出したいと思っています。
pythonのコードではなく、JavaScript、jQueryでの解決方法を探しています。

<現状>

店舗 売上 変動費 固定費 利益
有楽町 1月 500 250 200 50
有楽町 2月 500 250 200 50
有楽町 3月 500 250 200 50
秋葉原 1月 500 250 200 50
秋葉原 2月 500 250 200 50
秋葉原 3月 500 250 200 50

<あるべき結果>

店舗 売上 変動費 固定費 利益
有楽町 1月 500 250 200 50
2月 500 250 200 50
3月 500 250 200 50
小計 1500 750 600 150
秋葉原 1月 500 250 200 50
2月 500 250 200 50
3月 500 250 200 50
小計 1500 750 600 150
全店舗 合計 3000 1500 1200 300

現在のソースコード(参考)

views.py

from django.conf import settings
from django.shortcuts import get_object_or_404, render, redirect, resolve_url
from django.http import HttpResponse
from django.views import generic
from django.views.generic import ListView, DetailView, TemplateView
from .models import Plan, Shop


class IndexView(TemplateView):
    def get(self, request, *args, **kwargs):
        plan_list = Plan.objects.all().order_by('shop', 'month')
        params = {
            'plan_list': plan_list,
        }
        return render(request, 'myapp/index.html', params)

models.py

from django.db import models


class Shop(models.Model):
    name = models.CharField('店舗名', max_length=20)
    def __str__(self):
        return self.name


class Plan(models.Model):
    shop = models.ForeignKey(Shop, on_delete=models.PROTECT, blank=True)
    month = models.PositiveIntegerField('月')
    sales = models.PositiveIntegerField('売上高')
    variable_rate = models.DecimalField('変動比率', max_digits=4, decimal_places=2)
    fixed_cost = models.PositiveIntegerField('固定費')

    def __int__(self):
        return self.sales

    def variable_cost(self):
        variable_cost = self.sales * self.variable_rate / 100
        return variable_cost

    def calc_profit(self):
        profit = self.sales - self.variable_cost() - self.fixed_cost
        return profit

index.html

<!doctype html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>WebAPP</title>
  </head>
  <body>
      <div class="container">
          <div class="row">
              <div class="col">
                <h1>計画APP</h1>
                <br><br>
                <table id="mytable" class="table">
                    <thead>
                        <th>店舗</th>
                        <th></th>
                        <th>売上</th>
                        <th>変動費</th>
                        <th>固定費</th>
                        <th>利益</th>
                    </thead>
                    {% for item in plan_list %}
                    <tbody>
                        <td>{{ item.shop }}</td>
                        <td>{{ item.month }}</td>
                        <td>{{ item.sales }}</td>
                        <td>{{ item.variable_cost }}</td>
                        <td>{{ item.fixed_cost }}</td>
                        <td>{{ item.calc_profit }}</td>
                    </tbody>
                    {% endfor %}
                </table>
              </div>
         </div>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

ご教授の程、よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2019/06/13 11:26

    合計値がおかしいようですが、単純に足し合わせていると考えていいのでしょか?

    キャンセル

  • kei344

    2019/06/13 11:54

    ご自身で試されたJavaScriptコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

    キャンセル

  • liverty

    2019/06/14 07:11

    x_x様 
    合計値は打ち間違えておりました。単純に足し合わせていると考えて大丈夫です。

    kei344様
    いま試行錯誤中ですが、javascriptが初めてなので全く分からない状態です。
    javascriptで作った電卓のようなソースコードはいくつか見つけていますが、私がやりたいことに適用できないでおります。

    キャンセル

回答 2

checkベストアンサー

+1

サーバー側で処理したほうがいいと思いますが、何らかの理由で jQuery を使わなければいけないなら .each() でループを回せばいいでしょう。
https://api.jquery.com/each/

小計の例

  const createSubtotal = sum => {
    const tbody = $('<tbody><tr><td></td><td>小計</td><td></td><td></td><td></td><td></td></tr></tbody>');
    for (let i = 0; i < sum.length; i++) {
      $(tbody[0].rows[0].cells[i + 2]).text(sum[i].toString());
    }

    return tbody;
  };

  let pre = '';
  let sum = [0, 0, 0, 0];
  $('#mytable tbody tr').each((_index, tr) => {
    const shop = $(tr.cells[0]).text();
    if (pre && pre !== shop) {
      $(tr).parent().before(createSubtotal(sum));
      sum.fill(0);
    }

    for (let i = 0; i < sum.length; i++) {
      sum[i] += parseInt($(tr.cells[i + 2]).text(), 10);
    }

    pre = shop;
  });

  $('#mytable tbody').last().after(createSubtotal(sum));

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/15 11:52

    ありがとうございます。
    試してみます。

    キャンセル

+1

var arr = [];
{% for item in plan_list %}
  arr.push( [ '{{ item.shop }}', '{{ item.month }}', {{ item.sales }}, {{ item.variable_cost }}, {{ item.fixed_cost }}, {{ item.calc_profit }} ] );
{% endfor %}


みたいな感じで出力すれば、配列の配列として取り出せるので、これを集計して出力するといいかと思います。
JavaScriptの文法構造はPythonとそれほど違いませんので、普通にfor文とif文を使って書けば大丈夫です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/15 11:52

    ありがとうございます。試してみます。

    キャンセル

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

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

同じタグがついた質問を見る

  • JavaScript

    21057questions

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

  • Python

    12369questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • jQuery

    8384questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Django

    1707questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。