숫자 3자리마다 comma 삽입하기...도와주세요ㅠㅠ
본문
현재 견적계산기폼을 만들었는데 계산은 잘되고있구요,,
나오는 결과값에 숫자3자리마다 콤마를 표시하고싶은데
구글에 자바스크립트콤마를 검색해보니 많은자료가나오던데
어느부분에다가 무슨 스크립트를 넣어야할지 모르겠습니다...ㅠㅠ
도와주세요ㅜㅜ 그누보드5버전사용중입니다.
<div id="container" style="border:1px solid #000; width:965px">
<br>
<span style="font-size:1.5em; font-weight:bold; padding-right:50px;"> 카메라 </span>
<select id="selGoods" name="selGoods" style="height:40px; width:65%"></select>
<button id="btnAddGoods" style="height:40px; width:15%">추가</button>
<br><br>
<span style="font-size:1.5em; font-weight:bold; width:200px;"> DVR(녹화기) </span>
<select id="selGoods02" name="selGoods02" style="height:40px; width:65%"></select>
<button id="btnAddGoods02" style="height:40px; width:15%">추가</button>
<br><br>
<span style="font-size:1.5em; font-weight:bold; padding-right:70px;"> HDD </span>
<select id="selGoods03" name="selGoods03" style="height:40px; width:65%"></select>
<button id="btnAddGoods03" style="height:40px; width:15%">추가</button>
<br><br>
<span style="font-size:1.5em; font-weight:bold; padding-right:0px;"> 설치해야하는 층수 </span>
<select id="selGoods04" name="selGoods04" style="height:40px; width:75%"></select>
</div>
<div style="clear:both"></div>
<p style="font-size:1.3em; background:#B1CFEF; color:#333; padding:20px 20px; text-align:left; font-weight:bold;">
<small>자재비 </small>: <input id="goodsTotAmt" name="totAmt" value=0 style="height:30px; line-height:30px; text-align:center;"> 원
</p>
<p style="font-size:1.3em; background:#E2F0F7; color:#333; padding:20px 20px; text-align:left; font-weight:bold;">
<small>배선비 (카메라대수 X 8,000)+(층수 X 8,000)</small>: <input id="goodsTotAmtt" name="sumAmtt" value=0 style="height:30px; line-height:30px; text-align:center;"> 원
</p>
<p style="font-size:1.3em; background:#E2F0F7; color:#333; padding:20px 20px; text-align:left; font-weight:bold;">
<small>공임비 (카메라대수 X 50,000)</small>: <input id="goodsTotAmttt" name="sumAmttt" value=0 style="height:30px; line-height:30px; text-align:center;"> 원
</p>
<p style="font-size:1.3em; background:#E2F0F7; color:#333; padding:20px 20px; text-align:left; font-weight:bold;">
<small>부자재(아답터,배선 외) 자재비 X 10%</small> : <input id="goodsTotAmtttt" name="sumAmtttt" value=0 style="height:30px; line-height:30px; text-align:center;"> 원
</p>
<p style="font-size:1.3em; background:#E2F0F7; color:#333; padding:20px 20px; text-align:left; font-weight:bold;">
<small>기업이윤 및 부대경비 (총금액 X 10%)</small> : <input id="goodsTotAmttttt" name="sumAmttttt" value=0 style="height:30px; line-height:30px; text-align:center;"> 원
</p>
<p style="font-size:1.5em; background:#0e68b2; color:#fff; padding:20px 20px; text-align:center; font-weight:bold;">
총 견적비 : <input id="goodsTotAmtSum" name="sumAmtSum" value=0 style="height:40px; line-height:40px; text-align:center;"> 원
</p>
<script>
$(function() {
//console.log("ready!");
});
var mo = 0;
var moo = 0;
var mooo = 0;
var moooo = 0;
var mooooo = 0;
var mot = 0;
var tt = 1;
// 성품 처리
function Goods() {
var p = this;
var funType = "p";
this.goodsType = "goods1";
// json 배열[{goodsId:goodsId, goodsNm:goodsNm, amt:amt},{...},{...}]
this.arrAllGoods = new Array(); // 상품 목록
this.arrSelGoods = new Array(); // 선택한 상품 목록
//상품 추가 시
this.select = function(trgtGoodsId) {
// 전체 목록 배열에서 검색하여 goodsId가 없다면 선택 목록에 push후 container안에 그려준다.
var selectedIndex = -1;
// 선택 목록에서 검색
for (var i=0; i<p.arrSelGoods.length; i++) {
if (p.arrSelGoods[i].goodsId == trgtGoodsId) {
selectedIndex = i;
break;
}
}
if (selectedIndex < 0) { // 선택목록에 없을 경우 추가
// 전체목록에서 선택 추가해줌.
for (var j=0; j<p.arrAllGoods.length; j++) {
if (p.arrAllGoods[j].goodsId == trgtGoodsId) {
p.arrSelGoods.push(p.arrAllGoods[j]);
p.arrSelGoods[p.arrSelGoods.length - 1].cnt = 0; // 무조건 개수 초기화
p.appendChoiceDiv(p.arrAllGoods[j]);
break;
}
}
}
else { // 있을경우
alert("이미 추가한 상품입니다.");
}
p.afterProc();
}
// 상품 제거 시
this.deselect = function(trgtGoodsId) {
var selectedIndex = -1;
// 배열에서 검색.
for (var i=0; i<p.arrSelGoods.length; i++) {
if (p.arrSelGoods[i].goodsId == trgtGoodsId) {
mo -= p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc;
mooo -= p.arrSelGoods[i].cnt * 50000;
p.removeChoiceDiv(p.arrSelGoods[i]);
p.arrSelGoods.splice(i, 1);
break;
}
}
funType = "d";
p.afterProc();
}
// 상품 목록 생성
this.appendChoiceDiv = function(prmtObj) {
var innerHtml = "";
if (p.goodsType == "goods1") {
innerHtml += '<div id="div_'+prmtObj.goodsId+'">';
innerHtml += '<ul>';
innerHtml += ' <li style="height:50px; line-height:50px;">품목 : '+prmtObj.goodsNm+' / '+prmtObj.goodsUnprc+'원 <button type="button" id="" class="remove" name="" style="width:60px; height:40px; margin-right:20px;" onclick="goods1.deselect(\''+prmtObj.goodsId+'\');">품목삭제</button> 수량 : <input type="text" id="input_cnt_'+prmtObj.goodsId+'" name="" value="0"/ style="height:35px; text-align:center;"> <button type="button" id="" class="add" name="" style="width:40px; height:40px;" onclick="goods1.minus(\''+prmtObj.goodsId+'\');">-</button> <button type="button" id="" class="remove" name="" style="width:40px; height:40px; margin-right:20px;" onclick="goods1.plus(\''+prmtObj.goodsId+'\');">+</button> 가격 : <input type="text" id="input_sumAmt_'+prmtObj.goodsId+'" name="" value="0"/ style="height:35px; text-align:center;"> 원 </li>';
innerHtml += '</ul>';
innerHtml += '</div>';
}
else if (p.goodsType == "goods2"){
innerHtml += '<div id="div_'+prmtObj.goodsId+'">';
innerHtml += '<ul>';
innerHtml += ' <li style="height:50px; line-height:50px;">품목 : '+prmtObj.goodsNm+' / '+prmtObj.goodsUnprc+'원 <button type="button" id="" class="remove" name="" style="width:60px; height:40px; margin-right:20px;" onclick="goods2.deselect(\''+prmtObj.goodsId+'\');">품목삭제</button> 수량 : <input type="text" id="input_cnt_'+prmtObj.goodsId+'" name="" value="0"/ style="height:35px; text-align:center;"> <button type="button" id="" class="add" name="" style="width:40px; height:40px;" onclick="goods2.minus(\''+prmtObj.goodsId+'\');">-</button> <button type="button" id="" class="remove" name="" style="width:40px; height:40px; margin-right:20px;" onclick="goods2.plus(\''+prmtObj.goodsId+'\');">+</button> 가격 : <input type="text" id="input_sumAmt_'+prmtObj.goodsId+'" name="" value="0"/ style="height:35px; text-align:center;"> 원</li>';
innerHtml += '</ul>';
innerHtml += '</div>';
}
else if (p.goodsType == "goods3"){
innerHtml += '<div id="div_'+prmtObj.goodsId+'">';
innerHtml += '<ul>';
innerHtml += ' <li style="height:50px; line-height:50px;">품목 : '+prmtObj.goodsNm+' / '+prmtObj.goodsUnprc+'원 <button type="button" id="" class="remove" name="" style="width:60px; height:40px; margin-right:20px;" onclick="goods3.deselect(\''+prmtObj.goodsId+'\');">품목삭제</button> 수량 : <input type="text" id="input_cnt_'+prmtObj.goodsId+'" name="" value="0"/ style="height:35px; text-align:center;"> <button type="button" id="" class="add" name="" style="width:40px; height:40px;" onclick="goods3.minus(\''+prmtObj.goodsId+'\');">-</button> <button type="button" id="" class="remove" name="" style="width:40px; height:40px; margin-right:20px;" onclick="goods3.plus(\''+prmtObj.goodsId+'\');">+</button> 가격 : <input type="text" id="input_sumAmt_'+prmtObj.goodsId+'" name="" value="0"/ style="height:35px; text-align:center;"> 원</li>';
innerHtml += '</ul>';
innerHtml += '</div>';
}
$('#container').append(innerHtml);
}
// 상품 목록 제거
this.removeChoiceDiv = function(prmtObj) {
$("#div_"+prmtObj.goodsId).remove();
}
// 상품 목록 추가
this.plus = function(trgtGoodsId) {
for (var i=0; i<p.arrSelGoods.length; i++) {
if (p.arrSelGoods[i].goodsId == trgtGoodsId) {
p.arrSelGoods[i].cnt++;
mo += p.arrSelGoods[i].goodsUnprc;
moo += p.arrSelGoods[i].goodsUnprc * 0.1;
break;
}
}
funType = "p";
p.afterProc();
}
// 상품 목록 삭제
this.minus = function(trgtGoodsId) {
for (var i=0; i<p.arrSelGoods.length; i++) {
if (p.arrSelGoods[i].goodsId == trgtGoodsId) {
if (p.arrSelGoods[i].cnt == 0) {
break;
}
mo -= p.arrSelGoods[i].goodsUnprc;
moo -= p.arrSelGoods[i].goodsUnprc * 0.1;
p.arrSelGoods[i].cnt--;
break;
}
}
funType = "m";
p.afterProc();
}
// 계산 후처리
this.afterProc = function() {
for (var i=0; i<p.arrSelGoods.length; i++) {
$('#input_cnt_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt);
$('#input_sumAmt_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc);
$('#input_sumAmtt_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc);
$('#input_sumAmttt_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc * 50000);
$('#input_sumAmtttt_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc * 0.1);
$('#input_sumAmttttt_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc * 0.1);
$('#input_sumAmtSum_'+p.arrSelGoods[i].goodsId).val(p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc);
}
var goodsTotAmt = 0;
var gg = 0;
var g = true;
var totaln = 0;
for (var i=0; i<p.arrSelGoods.length; i++) {
goodsTotAmt += p.arrSelGoods[i].cnt * p.arrSelGoods[i].goodsUnprc;
gg += p.arrSelGoods[i].cnt;
if (p.arrSelGoods[i].cnt != 0) {
g = false;
}
}
mooooo = (gg * 8000) + (tt * 8000);
mooo = gg * 50000;
$('#goodsTotAmt').val(mo);
if (g) {
if (p.goodsType == "goods1") {
mooooo = 0;
$('#goodsTotAmtt').val(0);
}
else {
$('#goodsTotAmtt').val(mooooo);
}
}
else {
$('#goodsTotAmtt').val(mooooo);
}
totaln = mo + mooooo + mooo + moo;
mot = totaln + (totaln * 0.1);
$('#goodsTotAmttt').val(mooo);
$('#goodsTotAmtttt').val(moo);
$('#goodsTotAmttttt').val(totaln * 0.1);
$('#goodsTotAmtSum').val(mot);
}
}
// 체인지 이벤트
var currentMoney = 0;
var currentNum = 1;
$('#form1 :input').on('change', calculate1);
$('#RAM').on('change', calculate2);
function calculate1() {
var price = 0;
var totalMoney = 0;
$('#form1 :input').each(function () {
price += +$(this).val();
});
currentMoney = price;
console.log(currentNum);
totalMoney = currentMoney * currentNum;
$('#price').html(totalMoney.toString().replace(/\B(?=(\d{3})+\b)/g, ","));
$('#price6').html(totalMoney.toString().replace(/\B(?=(\d{3})+\b)/g, ","));
}
function calculate2() {
var totalMoney = 0;
currentNum = $(this).val();
totalMoney = currentMoney * currentNum;
$('#price').html(totalMoney.toString().replace(/\B(?=(\d{3})+\b)/g, ","));
$('#price6').html(totalMoney.toString().replace(/\B(?=(\d{3})+\b)/g, ","));
}
// 추가 등록
var goods1 = new Goods();
var goods2 = new Goods();
var goods3 = new Goods();
var goods4 = new Goods();
// jstl로 전체 상품 목록 미리 세팅
goods1.goodsType = "goods1";
goods1.arrAllGoods.push({goodsId:"G010108001001001", goodsUnprc:29000, goodsNm:"돔형(실내용) 210만화소", cnt:0});
goods1.arrAllGoods.push({goodsId:"G010108001001002", goodsUnprc:38000, goodsNm:"돔형(실내용) 400만화소", cnt:0});
goods1.arrAllGoods.push({goodsId:"G010108002002001", goodsUnprc:35000, goodsNm:"뷸렛(옥외용) 210만화소", cnt:0});
goods1.arrAllGoods.push({goodsId:"G010108002002002", goodsUnprc:45000, goodsNm:"뷸렛(옥외용) 400만화소", cnt:0});
goods1.arrAllGoods.push({goodsId:"G010108003003001", goodsUnprc:110000, goodsNm:"하우징(고급형) 210만화소", cnt:0});
goods1.arrAllGoods.push({goodsId:"G010108003003002", goodsUnprc:130000, goodsNm:"하우징(고급형) 400만화소", cnt:0});
// jstl로 셀렉트 박스 옵션 채우기
$('#selGoods').append('<option id="" value="G010108001001001">돔형(실내용) 210만화소 - 29,000원</option>');
$('#selGoods').append('<option id="" value="G010108001001002">돔형(실내용) 400만화소 - 38,000원</option>');
$('#selGoods').append('<option id="" value="G010108002002001">뷸렛(옥외용) 210만화소 - 35,000원</option>');
$('#selGoods').append('<option id="" value="G010108002002002">뷸렛(옥외용) 400만화소 - 45,000원</option>');
$('#selGoods').append('<option id="" value="G010108003003001">하우징(고급형) 210만화소 - 110,000원</option>');
$('#selGoods').append('<option id="" value="G010108003003002">하우징(고급형) 400만화소 - 130,000원</option>');
// jstl로 전체 상품 목록 미리 세팅
goods2.goodsType = "goods2";
goods2.arrAllGoods.push({goodsId:"G010108004001001", goodsUnprc:80000, goodsNm:"4CH 210만화소", cnt:0});
goods2.arrAllGoods.push({goodsId:"G010108004001002", goodsUnprc:110000, goodsNm:"4CH 210만화소", cnt:0});
goods2.arrAllGoods.push({goodsId:"G010108005002001", goodsUnprc:130000, goodsNm:"8CH 210만화소", cnt:0});
goods2.arrAllGoods.push({goodsId:"G010108005002002", goodsUnprc:160000, goodsNm:"8CH 210만화소", cnt:0});
goods2.arrAllGoods.push({goodsId:"G010108006003001", goodsUnprc:250000, goodsNm:"16CH 210만화소", cnt:0});
goods2.arrAllGoods.push({goodsId:"G010108006003002", goodsUnprc:320000, goodsNm:"16CH 210만화소", cnt:0});
// jstl로 셀렉트 박스 옵션 채우기
$('#selGoods02').append('<option id="" value="G010108004001001">4CH 210만화소 - 80,000원</option>');
$('#selGoods02').append('<option id="" value="G010108004001002">4CH 400만화소 - 110,000원</option>');
$('#selGoods02').append('<option id="" value="G010108005002001">8CH 210만화소 - 130,000원</option>');
$('#selGoods02').append('<option id="" value="G010108005002002">8CH 400만화소 - 160,000원</option>');
$('#selGoods02').append('<option id="" value="G010108006003001">16CH 210만화소 - 250,000원</option>');
$('#selGoods02').append('<option id="" value="G010108006003002">16CH 400만화소 - 320,000원</option>');
// jstl로 전체 상품 목록 미리 세팅
goods3.goodsType = "goods3";
goods3.arrAllGoods.push({goodsId:"G010108007001001", goodsUnprc:55000, goodsNm:"1T", cnt:0});
goods3.arrAllGoods.push({goodsId:"G010108007001002", goodsUnprc:75000, goodsNm:"2T", cnt:0});
goods3.arrAllGoods.push({goodsId:"G010108008002001", goodsUnprc:100000, goodsNm:"3T", cnt:0});
goods3.arrAllGoods.push({goodsId:"G010108008002002", goodsUnprc:140000, goodsNm:"4T", cnt:0});
// jstl로 셀렉트 박스 옵션 채우기
$('#selGoods03').append('<option id="" value="G010108007001001">1T - 55,000원</option>');
$('#selGoods03').append('<option id="" value="G010108007001002">2T - 75,000원</option>');
$('#selGoods03').append('<option id="" value="G010108008002001">3T - 100,000원</option>');
$('#selGoods03').append('<option id="" value="G010108008002002">4T - 140,000원</option>');
$('#selGoods04').append('<option id="" value="1">1개층</option>');
$('#selGoods04').append('<option id="" value="2">2개층</option>');
$('#selGoods04').append('<option id="" value="3">3개층</option>');
$('#selGoods04').append('<option id="" value="4">4개층</option>');
$('#selGoods04').append('<option id="" value="5">5개층</option>');
$('#selGoods04').append('<option id="" value="6">6개층</option>');
$('#selGoods04').append('<option id="" value="7">7개층</option>');
$('#selGoods04').append('<option id="" value="8">8개층</option>');
$('#selGoods04').append('<option id="" value="9">9개층</option>');
$('#selGoods04').append('<option id="" value="10">10개층</option>');
// 클릭 이벤트
$('#btnAddGoods').on('click', function() {
goods1.select($('#selGoods option:selected').val());
});
$('#btnAddGoods02').on('click', function() {
goods2.select($('#selGoods02 option:selected').val());
});
$('#btnAddGoods03').on('click', function() {
goods3.select($('#selGoods03 option:selected').val());
});
$('#selGoods04').on('change', function() {
var t = $('#selGoods04 option:selected').val();
var n = 0;
var nm = 0;
if (tt > t) {
nm = tt - t;
n = mooooo - (nm * 8000);
}
else if (tt < t) {
nm = t - tt;
n = mooooo + (nm * 8000);
}
tt = t;
if (mooooo != 0) {
mooooo = n;
$('#goodsTotAmtt').val(n);
}
});
</script>
<div style="clear:both"></div>
답변 2
그누보드5는 기본적으로 php, js 모두 number_format()함수를 제공합니다.
/lib/common.lib.php
/js/common.js
최종 화면에서 보여지는 부분에 위 함수로 감싸주기만 하면 됩니다.
예를 들어, php 변수값이라면
<?php echo number_format($변수명);?>
자바스크립트라면
number_format(변수명);
소스 겁나 기네... 스크롤 하다 손가락 나가겠습니다.
올려주신 소스가 그누 소스는 아닌듯 합니다.
출력하는 곳을 찾아서 웹학교 님 답변처럼 넣어 주시면 됩니다.
저게 어려우면 제작의뢰 말고는 방법이 없습니다.
스크립트 보니 가능하신 분 같은데요...
답변을 작성하시기 전에 로그인 해주세요.