숫자 3자리마다 comma 삽입하기...도와주세요ㅠㅠ

숫자 3자리마다 comma 삽입하기...도와주세요ㅠㅠ

QA

숫자 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(변수명);

 

 

 

소스 겁나 기네... 스크롤 하다 손가락 나가겠습니다.

올려주신 소스가 그누 소스는 아닌듯 합니다.

출력하는 곳을 찾아서 웹학교 님 답변처럼 넣어 주시면 됩니다.

저게 어려우면 제작의뢰 말고는 방법이 없습니다.

스크립트 보니 가능하신 분 같은데요...

답변을 작성하시기 전에 로그인 해주세요.
전체 33
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT