金額のカンマ表示と計算の反映がうまくできません

【したいこと】
データ１の金額、データ２の金額、総計、テーブルにおいてカンマで表示したいです。

【うまくできないこと】
試しにテーブルデータにjqueryにてカンマ表示にさせると、
例えば2000＋1,000の場合、
総計に、2001のように表示されてしまいます。

【ためしたこと】
カンマを取り除くために、replaceで除去して、parseIntで数値に変換しようとしても、
カンマが含まれない数字が混ざっていると？エラーが出ます。
対処になるかわからないのですが、
matchで、カンマがある数値の場合は、処理しないようにしたり、
indexOfで判別させてみたりしても、エラーが消えず、うまくいきませんでした。

見た目はカンマ表示で、計算させる時はカンマを取り除いて、stringになってたら数値化して計算させると思うのですが・・・
ご教授いただけると幸いです。

【追記】
データ名1の[データ1]のように幅がある数値の場合も、表示と計算がされるようにしたいです。
[データ1]の場合は、総計にて最小値と最大値が、表示されるようにしております。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<meta name="robots" content="noindex,nofollow">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8		<title>デモ</title>
9
10		<style>
11			html{
12				font-size:20px;
13			}
14			body{
15				margin:30px;
16			}
17			main{
18				background-color:#f8f8f8;
19				padding:20px;
20			}
21			h2{
22				font-size:22px;
23			}
24			#modal-content{
25				max-height: calc(100vh - 1.5em);
26				width:50%;
27				margin:1.5em auto 0;
28				padding:10px 20px;
29				border:2px solid #aaa;
30				background:#fff;
31				z-index:2;
32				position:fixed;
33				display:none;
34				overflow: auto;
35			}
36
37			.button-link{
38				margin-left : 0;
39				text-align:center;
40				-moz-border-radius: 5px;
41				-webkit-border-radius: 5px;
42				border-radius: 5px;
43			}
44			.closestyle{
45				font-size:20px;
46				margin-left : 500px;
47				text-align:center;
48				-moz-border-radius: 5px;
49				-webkit-border-radius: 5px;
50				border-radius: 5px;
51			}
52
53			.closestyle:hover,
54			.button-link:hover{
55				cursor:pointer;
56				color:#f00;
57			}
58
59			#modal-overlay{
60				z-index:1;
61				display:none;
62				position:fixed;
63				top:0;
64				left:0;
65				width:100%;
66				height:120%;
67				background-color:rgba(0,0,0,0.75);
68			}
69			td{
70				padding:5px;
71			}
72			select,input,textarea{
73				font-family : inherit;
74				font-size:20px;		
75				padding:3px;
76				border:1px solid black;
77				vertical-align:middle;
78			}
79		</style>
80	</head>
81	<body>
82
83	<main>
84		<h1 style="color:black;">ＤＥＭＯ</h1>
85		<HR style="margin: 1em 0 ;">
86
87		<!-- １つめの計算の箇所-->
88		<h2>データ名1</h2>
89		<input type="text" id="subtotal1" list="list" style="width:250px;">
90		<p id="subresult1">0円</p>
91		<input type="button" id="clearbutton" value="クリア">
92		<!-- １つめの計算の箇所ここまで-->
93
94		<HR style="margin: 1em 0 ;">
95
96		<h2>データ名3</h2>	
97
98		<!-- ここからモーダルウィンドウ -->
99		<div id="modal-content">
100			<p><a id="modal-close1" class="closestyle">[閉じる]</a></p>
101			<form name="childfrm" action="" method="post">
102				<input id="btn4444" type="button" value="確定">
103			</form><br>
104			<input type="text" id="search" style="width:200px;height:30px;vertical-align:middle;">
105			<input type="button" value="絞り込む" id="button">
106			<input type="button" value="すべて表示" id="button2">
107
108			<p id="kekka" style="display:none;height:50px;width:300px;text-align:center;"></p><br><br>
109
110			<table id="result" style="border-spacing:0;" cellpadding="0" cellspacing="0" border="1" class="tbl">
111				<thead><th>✔︎</th><th>ﾃﾞｰﾀ1</th><th>ﾃﾞｰﾀ2</th><th>金額</th></thead>
112				<tbody>
113					<tr>
114						<th></th>
115						<td></td>
116					</tr>
117				</tbody>
118			</table>
119			<p><a id="modal-close2" class="closestyle">[閉じる]</a></p><br>
120		</div>
121		<!-- モーダルウィンドウのコンテンツ終了 -->
122		<p><a id="modal-open" class="button-link" style="color:red;">クリックするとウィンドウが開きます。</a></p>
123		<!-- ここまでモーダルウィンドウ -->
124		
125		<p id="address"></p>
126		<p id="subresult3">0円</p>
127		
128		<HR style="margin: 2em 0 ;">
129
130		<h2>総計</h2>
131		<p id="gassan">0円</p>
132	</main>
133
134
135
136
137	<script>
138		jQuery(function($){
139		window.Calc1=0;
140		window.Calc3=0;
141
142		$("#modal-open").click(function(){
143			$( this ).blur();    
144			if( $( "#modal-overlay" )[0]) return false;        
145			$( "body" ).append( '<div id="modal-overlay"></div>');
146			$( "#modal-overlay" ).fadeIn( "slow" );
147			centeringModalSyncer();
148			$( "#modal-content" ).fadeIn( "slow" );	
149			$( "#modal-overlay,#modal-close1,#modal-close2,#btn4444" ).unbind().click( function(){
150				$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
151					$('#modal-overlay').remove();
152				});
153			});
154		});
155		$( window ).resize( centeringModalSyncer);
156
157		function centeringModalSyncer() {
158			var w = $( window ).width();
159			var h = $( window ).height();
160			var cw = $( "#modal-content" ).outerWidth();
161			var ch = $( "#modal-content" ).outerHeight();
162			$( "#modal-content" ).css( {
163				"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"});
164			}
165		});
166
167		var data1Json=[
168			{"list":"ﾃﾞｰﾀ1","value":"1000〜2000","type":"3"},
169			{"list":"ﾃﾞｰﾀ2","value":"2000","type":"3"},
170			{"list":"ﾃﾞｰﾀ3","value":"3000","type":"3"},
171			{"list":"ﾃﾞｰﾀ4","value":"500","type":"3"}
172		];
173
174		var data3Json={"release":[
175			{"dt1":"東京都","dt2":"まるまる","ps1":"1000"},
176			{"dt1":"東京都","dt2":"ばつばつ","ps1":"500"},
177			{"dt1":"大阪府","dt2":"まるまる","ps1":"1000"}
178		]};
179
180		//TableのHTMLを初期化
181		$("table.tbl tbody").html("");
182
183		//TableのHTMLを生成
184		$(data3Json.release).each(function(){
185			$('<tr>'+
186			'<th><input type="radio" name="hoge" class="hoge" value="1" /></th>'+
187			'<td class="label">' + this.dt1 + '</td>'	+
188			'<td><label style="display:none;">'+this.dt1+this.dt2+'</label>'+ this.dt2 + '</td>' +
189			'<td><span>'+this.ps1 + '</span></td>' +
190			'</tr>').appendTo('table.tbl tbody');
191		})
192
193
194		$("td span").each(function(){
195			addFigure($(this));
196		});
197		function addFigure(elem){
198			elem.text(elem.text().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ));
199		}
200
201		Object.keys(data1Json).forEach(function(key){
202			var d=$('<datalist id="list">').append(data1Json.map(x=>$(`<option value="${x.list}"</option>`)));
203			$("input#subtotal1").append(d);			
204		});
205
206		$('#clearbutton').on("click",function(){
207			$('input#subtotal1').val('');
208			$("#subresult1").text('円');
209			window.Calc1="";
210			window.SplitHantei=false;
211			gassanFnc();
212		});
213
214		$('#button').on("click",function(){
215			var re = new RegExp($('#search').val());
216			$('#result tbody tr').each(function(){
217				var txt = $(this).find("td:eq(1)").html();
218				var txt2 = $(this).find("td:eq(2)").html();
219				if(txt.match(re) == null && txt2.match(re) == null){
220					$(this).css('display', 'none');
221				}else{
222					$(this).css('display', 'table-row');
223				}
224			});
225		});
226
227		$('#button2').on("click",function(){
228			$('#search').val('');
229			$('#result tr').css('display', 'table-row');
230		});
231
232		//1つめのchange
233		$('input#subtotal1').change(function() {
234			const value = $(this).val();
235			const candidates = data1Json.filter(
236			item => item.list == value);
237			if (candidates.length > 0){
238				//「〜」の表記があれば最小値と最大値を変数に代入
239				var split=candidates[0].value.split('〜');
240				if(split.length>=2){
241					window.Calc1Min=split[0];
242					window.Calc1Max=split[1];
243					window.SplitHantei=true;					
244				}else{
245					window.SplitHantei=false;
246				}
247				$("#subresult1").text(candidates[0].value);
248				window.Calc1=candidates[0].value;
249				window.changeValue = candidates[0].type;
250			}else{
251				$("#subresult1").text('0円');
252			}
253			gassanFnc();
254		});
255
256
257		//ラジオボタン選択
258		$(document).on("change", 'input[type="radio"]', function(){
259			window.line = $(this).parents('tr').index();
260		});
261
262		//[確定]ボタン
263		$(document).on("click", '#btn4444', function(){
264			if(window.line >= 0){
265				window.Calc3=TableSelect($('table'), 3, window.line+1);		
266				$("#subresult3").text(window.Calc3+"円"); 
267				t1=data3Json.release[window.line].dt1;
268				t2=data3Json.release[window.line].dt2;
269				$('#address').text("住所："+t1+t2);
270				gassanFnc();
271			}
272		});
273
274		function TableSelect (table, x = 1, y = 1) {
275			let q = `table tr:nth-of-type(${y}) td:nth-of-type(${x})`;
276			return $('table').find($(q)).text();
277		}
278
279		//合算処理function
280		function gassanFnc() {
281			$("#subresult1").text(window.Calc1+"円");
282
283			if(window.SplitHantei==true){
284				number3 = window.Calc3.text();
285			if ( number3.indexOf(',') != -1) {
286				number3 = number3.replace(/,/g, '');
287			}
288				window.gassanMin=parseFloat(window.Calc1Min)+parseFloat(number3);
289				window.gassanMax=parseFloat(window.Calc1Max)+parseFloat(window.Calc3);
290				$("#gassan").text(window.gassanMin+"円"+"〜"+window.gassanMax+"円"); 	
291			}else{
292				number3 = window.Calc3;
293				$("#gassan").text(parseFloat(window.Calc1)+parseFloat(number3)+"円"); 	
294			}
295		}
296	</script>
297
298	</body>
299</html>

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

回答2件

コメントの返答のつもりが、間違ってこちらに書きました。
削除の仕方がわからないため、スルーでお願いします…

投稿2020/09/27 09:28

編集2020/09/27 09:33

Miii

総合スコア30

ベストアンサー

Javasuript
1// elem.text(elem.text().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ));
2// カンマとるならこれでいいよね？
3elem.text(elem.text().replace( /[,]/g, ''));
4

投稿2020/09/27 08:04

kuma_kuma_

総合スコア2506

Miii

2020/09/27 09:33

先日はありがとうございました。モーダル、jsonのアドバイスなどで、モーダルとjsonを組み込むことができました。なぜか、外部json読み込みが実環境では、うまくできなかったので、内部埋め込みで実環境で動きましたので、当面埋め込みで実装することにしました。とりあえず、形にしてから、わからない部分の理解を深めていこうと思います。おかげさまである程度のシステムが出来上がりました。(今回は質問に合わせてデータの一部です) 後は、オプションメニューのフォントをもう少し大きくしたり細かい調整がいりそうですが… 話が脱線しましたが、帰宅後いただいたアドバイスを元にコードを組んでみます！

Miii

2020/09/27 13:11

[,]でしたか！！おかげさまでできました！ありがとうございます！

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

あなたの回答