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

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

QA

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

답변 2

본문

현재 견적계산기폼을 만들었는데 계산은 잘되고있구요,,

나오는 결과값에 숫자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(변수명);

 

 

 

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

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

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

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

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 33
© SIRSOFT
현재 페이지 제일 처음으로