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

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

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

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

JavaScript

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

jQuery

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

Python

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

Q&A

解決済

2回答

1827閲覧

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

ak_suzuki

総合スコア194

Django

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

JavaScript

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

jQuery

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

Python

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

0グッド

0クリップ

投稿2019/06/10 09:41

編集2019/06/13 22:08

概要

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

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

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

<現状>

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

<あるべき結果>

店舗売上変動費固定費利益
有楽町1月50025020050
2月50025020050
3月50025020050
小計1500750600150
秋葉原1月50025020050
2月50025020050
3月50025020050
小計1500750600150
全店舗合計300015001200300

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

views.py

python

1from django.conf import settings 2from django.shortcuts import get_object_or_404, render, redirect, resolve_url 3from django.http import HttpResponse 4from django.views import generic 5from django.views.generic import ListView, DetailView, TemplateView 6from .models import Plan, Shop 7 8 9class IndexView(TemplateView): 10 def get(self, request, *args, **kwargs): 11 plan_list = Plan.objects.all().order_by('shop', 'month') 12 params = { 13 'plan_list': plan_list, 14 } 15 return render(request, 'myapp/index.html', params)

models.py

python

1from django.db import models 2 3 4class Shop(models.Model): 5 name = models.CharField('店舗名', max_length=20) 6 def __str__(self): 7 return self.name 8 9 10class Plan(models.Model): 11 shop = models.ForeignKey(Shop, on_delete=models.PROTECT, blank=True) 12 month = models.PositiveIntegerField('月') 13 sales = models.PositiveIntegerField('売上高') 14 variable_rate = models.DecimalField('変動比率', max_digits=4, decimal_places=2) 15 fixed_cost = models.PositiveIntegerField('固定費') 16 17 def __int__(self): 18 return self.sales 19 20 def variable_cost(self): 21 variable_cost = self.sales * self.variable_rate / 100 22 return variable_cost 23 24 def calc_profit(self): 25 profit = self.sales - self.variable_cost() - self.fixed_cost 26 return profit

index.html

html

1<!doctype html> 2<html> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <!-- Bootstrap CSS --> 8 <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"> 9 <title>WebAPP</title> 10 </head> 11 <body> 12 <div class="container"> 13 <div class="row"> 14 <div class="col"> 15 <h1>計画APP</h1> 16 <br><br> 17 <table id="mytable" class="table"> 18 <thead> 19 <th>店舗</th> 20 <th></th> 21 <th>売上</th> 22 <th>変動費</th> 23 <th>固定費</th> 24 <th>利益</th> 25 </thead> 26 {% for item in plan_list %} 27 <tbody> 28 <td>{{ item.shop }}</td> 29 <td>{{ item.month }}</td> 30 <td>{{ item.sales }}</td> 31 <td>{{ item.variable_cost }}</td> 32 <td>{{ item.fixed_cost }}</td> 33 <td>{{ item.calc_profit }}</td> 34 </tbody> 35 {% endfor %} 36 </table> 37 </div> 38 </div> 39 </div> 40 <!-- Optional JavaScript --> 41 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 42 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 43 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 44 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 45 </body> 46</html>

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

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

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

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

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

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

x_x

2019/06/13 02:26

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

2019/06/13 02:54

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

2019/06/13 22:11

x_x様  合計値は打ち間違えておりました。単純に足し合わせていると考えて大丈夫です。 kei344様 いま試行錯誤中ですが、javascriptが初めてなので全く分からない状態です。 javascriptで作った電卓のようなソースコードはいくつか見つけていますが、私がやりたいことに適用できないでおります。
guest

回答2

0

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/14 05:08

Lhankor_Mhy

総合スコア35865

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

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

ak_suzuki

2019/06/15 02:52

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

0

ベストアンサー

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

小計の例

jQuery

1 const createSubtotal = sum => { 2 const tbody = $('<tbody><tr><td></td><td>小計</td><td></td><td></td><td></td><td></td></tr></tbody>'); 3 for (let i = 0; i < sum.length; i++) { 4 $(tbody[0].rows[0].cells[i + 2]).text(sum[i].toString()); 5 } 6 7 return tbody; 8 }; 9 10 let pre = ''; 11 let sum = [0, 0, 0, 0]; 12 $('#mytable tbody tr').each((_index, tr) => { 13 const shop = $(tr.cells[0]).text(); 14 if (pre && pre !== shop) { 15 $(tr).parent().before(createSubtotal(sum)); 16 sum.fill(0); 17 } 18 19 for (let i = 0; i < sum.length; i++) { 20 sum[i] += parseInt($(tr.cells[i + 2]).text(), 10); 21 } 22 23 pre = shop; 24 }); 25 26 $('#mytable tbody').last().after(createSubtotal(sum));

投稿2019/06/14 05:00

x_x

総合スコア13749

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

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

ak_suzuki

2019/06/15 02:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問