Word Pressで、見積計算機能を作成しました。各項目と個数入力などで小計と合計を計算する仕様です。
カスタマイズや別途作成のご相談承っております。
この記事でわかること
見積もり計算機能の仕様
各項目と個数入力などで小計と合計を計算する仕様です。
下記は、デモです。
見積もり計算機能のデモ
下記は商品金額と、個数を小計で税抜、税込金額で小計をだし、最下部で合計金額を出しています。
デモ商品１と２は個数を入力（2桁まで）
デモ商品３と４は個数をセレクトボックスから選択（範囲１，２，３のうち）
| 商品名 | 料金（単価） | 個数 | 税抜 | 税込 |
| デモ商品１ | 5,250 | 0 | 0 | |
| デモ商品２ | 2,750 | 0 | 0 | |
| デモ商品３ | 30,000 | 0 | 0 | |
| デモ商品４ | 50,000 | 0 | 0 | |
| 合計 | 0 | 0 |
見積もり計算機能のデモのソースコード
見積もり計算機能のデモのソースコードを公開します。コピーして活用ください。
コピー活用された方、カスタマイズや別機能の実装等、お仕事のご依頼お待ちしております。
自社最適の見積もり計算機能を作成してほしい方、 お気軽にご相談ください。
ソースコード、HTML
それでは、ソースコード、まず、HTMLです。
<figure class="wp-block-table">
<table class="price-table">
<tbody>
<tr>
<td>商品名</td>
<td>料金（単価）</td>
<td>個数</td>
<td>税抜</td>
<td>税込</td>
</tr>
<tr>
<td>デモ商品１</td>
<td class="sumple1_price">5,250</td>
<td><input type="tel" name="sumple1" class="form-ticker-symbol sumple1" maxlength="2" style="width: 80%; text-align: right;"/></td>
<td class="sumple1 notax">0</td>
<td class="sumple1-tax tax">0</td>
</tr>
<tr>
<td>デモ商品２</td>
<td class="sumple2_price">2,750</td>
<td><input type="tel" name="sumple2" class="form-ticker-symbol sumple2" maxlength="2" style="width: 80%; text-align: right;"/></td>
<td class="sumple2 notax">0</td>
<td class="sumple2-tax tax">0</td>
</tr>
<tr>
<td>デモ商品３</td>
<td class="sumple3_price">30,000</td>
<td><select id="sumple3" class="form-select" name="member" style="width: 80%; direction: rtl;">
<option value="0">0</option>
<option value="1">1-30</option>
<option value="2">31-50</option>
<option value="3">51-100</option>
</select>
</td>
<td class="sumple3 notax">0</td>
<td class="sumple3-tax tax">0</td>
</tr>
<tr>
<td>デモ商品４</td>
<td class="sumple4_price">50,000</td>
<td><select id="sumple4" class="form-select" name="member" style="width: 80%; direction: rtl;">
<option value="0">0</option>
<option value="1">1-30</option>
<option value="2">31-50</option>
<option value="3">51-100</option>
</select>
</td>
<td class="sumple4 notax">0</td>
<td class="sumple4-tax tax">0</td>
</tr>
<tr>
<td style="font-size:1.1em; font-weight: bold;">合計</td>
<td> </td>
<td> </td>
<td class="notax-total" style="font-size:1.1em; font-weight: bold;">0</td>
<td class="tax-total" style="font-size:1.1em; font-weight: bold;">0</td>
</tr>
</tbody>
</table>
</figure>ソースコード JavaScript（jQuery）
つづいて、JavaScript（jQueryで書いてます、冗長です）
$(function(){
var tax_total_nums = 0;
$('.form-ticker-symbol').on("keypress", function(event){return leaveOnlyNumber(event);});
$(".form-select").change(function() {
var target_value = $(this).val();
var target_name = $(this).attr('id');
var target_value_price = $('.' + target_name + '_price').text();
// カンマとる
var target_value_price_re = target_value_price.replace(",", "");
var target_value = Number(target_value);
var target_value_price_re_num = Number(target_value_price_re);
var target_value_price_re_num_comma = target_value_price_re_num.toLocaleString();
var target_value_tax_excluded = target_value*target_value_price_re_num;
var target_value_tax_excluded_tax = target_value_tax_excluded*1.1;
var target_value_tax_excluded_comma = target_value_tax_excluded.toLocaleString();
var target_value_tax_excluded_comma_tax = target_value_tax_excluded_tax.toLocaleString();
var target_value_tax_excluded_comma_renda = $('.' + target_name).text(target_value_tax_excluded_comma);
var target_value_tax_excluded_comma_renda_tax = $('.' + target_name +'-tax').text(target_value_tax_excluded_comma_tax);
tax_total_nums = 0;
$(".tax").each( function() {
var tax_total = $(this).text();
var tax_total_re = tax_total.replace(",", "");
var tax_total_num = Number(tax_total_re);
tax_total_nums += tax_total_num;
var notax_total_nums = tax_total_nums / 1.1;
var tax_total_nums_comma= tax_total_nums.toLocaleString();
var notax_total_nums_comma= notax_total_nums.toLocaleString();
$(".tax-total").text(tax_total_nums_comma);
$(".notax-total").text(notax_total_nums_comma);
});
});
$('.form-ticker-symbol').on("keyup", function(){
var target_name = $(this).attr('name');
var target_value = $('input[name=' + target_name + ']').val();
var target_value_price = $('.' + target_name + '_price').text();
var target_value_price_re = target_value_price.replace(",", "");
var target_value_price_re_num = Number(target_value_price_re);
var target_value_price_re_num_comma = target_value_price_re_num.toLocaleString();
var target_value_tax_excluded = target_value*target_value_price_re_num;
var target_value_tax_excluded_tax = target_value_tax_excluded*1.1;
var target_value_tax_excluded_comma = target_value_tax_excluded.toLocaleString();
var target_value_tax_excluded_comma_tax = target_value_tax_excluded_tax.toLocaleString();
var target_value_tax_excluded_comma_renda = $('.' + target_name).text(target_value_tax_excluded_comma);
var target_value_tax_excluded_comma_renda_tax = $('.' + target_name +'-tax').text(target_value_tax_excluded_comma_tax);
tax_total_nums = 0;
$(".tax").each( function() {
var tax_total = $(this).text();
var tax_total_re = tax_total.replace(",", "");
var tax_total_num = Number(tax_total_re);
tax_total_nums += tax_total_num;
var notax_total_nums = tax_total_nums / 1.1;
var tax_total_nums_comma= tax_total_nums.toLocaleString();
var notax_total_nums_comma= notax_total_nums.toLocaleString();
$(".tax-total").text(tax_total_nums_comma);
$(".notax-total").text(notax_total_nums_comma);
});
;});
function leaveOnlyNumber(e){
// 数字以外の不要な文字を削除
var st = String.fromCharCode(e.which);
if ("0123456789".indexOf(st,0) < 0) { return false; }
return true;
}
});以上です。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
