숫자입력시 자동합계 새로고침 문제

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    숫자입력시 자동합계 새로고침 문제

    QA

    숫자입력시 자동합계 새로고침 문제

    본문

    각 항목을 더해서 소계를 만들고 그것들의 합계 그리고 총계가 자동으로 계산되게 만들었습니다.

    (개노미님이 알려주신내용을 참조해서 만들었습니다. )

     

    원래는 잘 작동했었는데요... 2항이 새로 생겨서 제 나름대로 확장했습니다.

     

    자바를 잘 모르는 입장에서 어떻게든 수정하려했는데 

    아래와 같이 합계가 더하는게 아니고 합쳐지네요. ㅠㅠ

    자바 너무 어려워요.. ... 그럼 선배님들 부탁드립니다. 

     

     

    1026054658_1676009331.2309.png

     

    
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style>
            table td{vertical-align: middle;}
            input{width:70px;height:30px !important;text-align:center;line-height:30px; padding:0 3px !important; text-indent:0 !important; border:solid 1px #999; box-sizing:border-box;font-size:13px !important; color:#111;}
            input:read-only{background:lavender;}
        </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
    var sum111 = 0;
    $('.sum_11').change(function(evt) {
        var sum11 = 0;
        $('.sum_11').each(function(){
               sum11 += +$(this).val()  ;
         });
         $('input[name=wr_111]').val(Math.round(sum11)) ;
         $('input[name=wr_555]').val(Math.round($('input[name=wr_111]').val()) + ($('input[name=wr_222]').val()));
    });
    $('.sum_21').change(function(evt) {
        var sum21 = 0;
        $('.sum_21').each(function(){
               sum21 += +$(this).val()  ;
         });
         $('input[name=wr_222]').val(Math.round(sum21)) ;
         $('input[name=wr_555]').val(Math.round($('input[name=wr_111]').val()) + ($('input[name=wr_222]').val()));
    });
});
$(document).ready(function() {
    var sum222 = 0;
    $('.sum_31').change(function(evt) {
        var sum31 = 0;
        $('.sum_31').each(function(){
               sum31 += +$(this).val()  ;
         });
         $('input[name=wr_333]').val(Math.round(sum31)) ;
         $('input[name=wr_666]').val(Math.round($('input[name=wr_333]').val()) + ($('input[name=wr_444]').val()));
    });
    $('.sum_41').change(function(evt) {
        var sum41 = 0;
        $('.sum_41').each(function(){
               sum41 += +$(this).val()  ;
         });
         $('input[name=wr_444]').val(Math.round(sum41)) ;
         $('input[name=wr_666]').val(Math.round($('input[name=wr_333]').val()) + ($('input[name=wr_444]').val()));
         $('input[name=wr_999]').val(Math.round($('input[name=wr_555]').val()) + ($('input[name=wr_666]').val()));
    });
});
</script>

<table class="table table-bordered text-center">
<colgroup>
                            <col width="100px" />
                            <col width="100px" />
                            <col width="100px" />
                            <col width="100px" />
                            <col width="100px" />
                        </colgroup>
                        <thead>
                            <tr class="table-secondary">
                                <th scope="col">항목</th>
                                <th scope="col">1항-1</th>
                                <th scope="col">1항-2</th>
                                <th scope="col">2항-1</th>
                                <th scope="col">2항-2</th>
                                </tr>
                        </thead>
                        <tbody>
  
  <tr>
    <td>1번</td>
    <td><input type="number" name="wr_11" id="wr_11" class="sum_11" min="0" max="5" tabindex="1"></td>
    <td><input type="number" name="wr_21" id="wr_21" class="sum_21" min="0" max="5" tabindex="6"></td>
    <td><input type="number" name="wr_31" id="wr_31" class="sum_31" min="0" max="5" tabindex="11"></td>
    <td><input type="number" name="wr_41" id="wr_41" class="sum_41" min="0" max="5" tabindex="16"></td>
  </tr>
  <tr>
    <td>2번</td>
    <td><input type="number" name="wr_12" id="wr_12" class="sum_11" min="0" max="5" tabindex="2"></td>
    <td><input type="number" name="wr_22" id="wr_22" class="sum_21" min="0" max="5" tabindex="7"></td>
    <td><input type="number" name="wr_32" id="wr_32" class="sum_31" min="0" max="5" tabindex="12"></td>
    <td><input type="number" name="wr_42" id="wr_42" class="sum_41" min="0" max="5" tabindex="17"></td>
  </tr>
  
  <tr>
    <td>3번</td>
    <td><input type="number" name="wr_13" id="wr_13" class="sum_11" min="0" max="5" tabindex="3"></td>
    <td><input type="number" name="wr_23" id="wr_23" class="sum_21" min="0" max="5" tabindex="8"></td>
    <td><input type="number" name="wr_33" id="wr_33" class="sum_31" min="0" max="5" tabindex="13"></td>
    <td><input type="number" name="wr_43" id="wr_43" class="sum_41" min="0" max="5" tabindex="18"></td>
  </tr>
  
  <tr>
    <td>4번</td>
    <td><input type="number" name="wr_14" id="wr_14" class="sum_11" min="0" max="5" tabindex="4"></td>
    <td><input type="number" name="wr_24" id="wr_24" class="sum_21" min="0" max="5" tabindex="9"></td>
    <td><input type="number" name="wr_34" id="wr_34" class="sum_31" min="0" max="5" tabindex="14"></td>
    <td><input type="number" name="wr_44" id="wr_44" class="sum_41" min="0" max="5" tabindex="19"></td>
  </tr>
  
  <tr>
    <td>5번</td>
    <td><input type="number" name="wr_15" id="wr_15" class="sum_11" min="0" max="5" tabindex="5"></td>
    <td><input type="number" name="wr_25" id="wr_25" class="sum_21" min="0" max="5" tabindex="10"></td>
    <td><input type="number" name="wr_35" id="wr_35" class="sum_31" min="0" max="5" tabindex="15"></td>
    <td><input type="number" name="wr_45" id="wr_45" class="sum_41" min="0" max="5" tabindex="20"></td>
  </tr>
  
  <tr>
    <td>소계</td>
    <td><input type="number" name="wr_111" id="wr_111" class="sum_111" readonly></td>
    <td><input type="number" name="wr_222" id="wr_222" class="sum_222" readonly></td>
    <td><input type="number" name="wr_333" id="wr_333" class="sum_333" readonly></td>
    <td><input type="number" name="wr_444" id="wr_444" class="sum_444" readonly></td>
  </tr>
  
  <tr>
    <td>항 소계</td>
    <td colspan=2><input type="number" name="wr_555" id="wr_555" class="sum_555" readonly></td>
    <td colspan=2><input type="number" name="wr_666" id="wr_666" class="sum_666" readonly></td>
  </tr>
  
  <tr>
    <td>총계</td>
    <td colspan=4><input type="number" name="wr_999" id="wr_999" class="sum_999" readonly></td>
  </tr>
  </tbody>
</table>      
  
</body>
</html>
 
 

     

    #그누보드5 #자바스크립트

    이 질문에 댓글 쓰기 :

    답변 2

    개노미 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    115.♡.♡.220
    
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style>
            table td{vertical-align: middle;}
            input{width:70px;height:30px !important;text-align:center;line-height:30px; padding:0 3px !important; text-indent:0 !important; border:solid 1px #999; box-sizing:border-box;font-size:13px !important; color:#111;}
            input:read-only{background:lavender;}
        </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
    var sum111 = 0;
    $('.sum_11').change(function(evt) {
        var sum11 = 0;
        $('.sum_11').each(function(){
               sum11 += +$(this).val()  ;
         });
         $('input[name=wr_111]').val(Math.round(sum11)) ;
         $('input[name=wr_555]').val(Math.round($('input[name=wr_111]').val()) + Math.round($('input[name=wr_222]').val()));
    });
    $('.sum_21').change(function(evt) {
        var sum21 = 0;
        $('.sum_21').each(function(){
               sum21 += +$(this).val()  ;
         });
         $('input[name=wr_222]').val(Math.round(sum21)) ;
         $('input[name=wr_555]').val(Math.round($('input[name=wr_111]').val()) + Math.round($('input[name=wr_222]').val()));
    });
});
$(document).ready(function() {
    var sum222 = 0;
    $('.sum_31').change(function(evt) {
        var sum31 = 0;
        $('.sum_31').each(function(){
               sum31 += +$(this).val()  ;
         });
         $('input[name=wr_333]').val(Math.round(sum31)) ;
         $('input[name=wr_666]').val(Math.round($('input[name=wr_333]').val()) + Math.round($('input[name=wr_444]').val()));
    });
    $('.sum_41').change(function(evt) {
        var sum41 = 0;
        $('.sum_41').each(function(){
               sum41 += +$(this).val()  ;
         });
         $('input[name=wr_444]').val(Math.round(sum41)) ;
         $('input[name=wr_666]').val(Math.round($('input[name=wr_333]').val()) + Math.round($('input[name=wr_444]').val()));
         $('input[name=wr_999]').val(Math.round($('input[name=wr_555]').val()) + Math.round($('input[name=wr_666]').val()));
    });
});
</script>
<table class="table table-bordered text-center">
<colgroup>
                            <col width="100px" />
                            <col width="100px" />
                            <col width="100px" />
                            <col width="100px" />
                            <col width="100px" />
                        </colgroup>
                        <thead>
                            <tr class="table-secondary">
                                <th scope="col">항목</th>
                                <th scope="col">1항-1</th>
                                <th scope="col">1항-2</th>
                                <th scope="col">2항-1</th>
                                <th scope="col">2항-2</th>
                                </tr>
                        </thead>
                        <tbody>
  
  <tr>
    <td>1번</td>
    <td><input type="number" name="wr_11" id="wr_11" class="sum_11" min="0" max="5" tabindex="1"></td>
    <td><input type="number" name="wr_21" id="wr_21" class="sum_21" min="0" max="5" tabindex="6"></td>
    <td><input type="number" name="wr_31" id="wr_31" class="sum_31" min="0" max="5" tabindex="11"></td>
    <td><input type="number" name="wr_41" id="wr_41" class="sum_41" min="0" max="5" tabindex="16"></td>
  </tr>
  <tr>
    <td>2번</td>
    <td><input type="number" name="wr_12" id="wr_12" class="sum_11" min="0" max="5" tabindex="2"></td>
    <td><input type="number" name="wr_22" id="wr_22" class="sum_21" min="0" max="5" tabindex="7"></td>
    <td><input type="number" name="wr_32" id="wr_32" class="sum_31" min="0" max="5" tabindex="12"></td>
    <td><input type="number" name="wr_42" id="wr_42" class="sum_41" min="0" max="5" tabindex="17"></td>
  </tr>
  
  <tr>
    <td>3번</td>
    <td><input type="number" name="wr_13" id="wr_13" class="sum_11" min="0" max="5" tabindex="3"></td>
    <td><input type="number" name="wr_23" id="wr_23" class="sum_21" min="0" max="5" tabindex="8"></td>
    <td><input type="number" name="wr_33" id="wr_33" class="sum_31" min="0" max="5" tabindex="13"></td>
    <td><input type="number" name="wr_43" id="wr_43" class="sum_41" min="0" max="5" tabindex="18"></td>
  </tr>
  
  <tr>
    <td>4번</td>
    <td><input type="number" name="wr_14" id="wr_14" class="sum_11" min="0" max="5" tabindex="4"></td>
    <td><input type="number" name="wr_24" id="wr_24" class="sum_21" min="0" max="5" tabindex="9"></td>
    <td><input type="number" name="wr_34" id="wr_34" class="sum_31" min="0" max="5" tabindex="14"></td>
    <td><input type="number" name="wr_44" id="wr_44" class="sum_41" min="0" max="5" tabindex="19"></td>
  </tr>
  
  <tr>
    <td>5번</td>
    <td><input type="number" name="wr_15" id="wr_15" class="sum_11" min="0" max="5" tabindex="5"></td>
    <td><input type="number" name="wr_25" id="wr_25" class="sum_21" min="0" max="5" tabindex="10"></td>
    <td><input type="number" name="wr_35" id="wr_35" class="sum_31" min="0" max="5" tabindex="15"></td>
    <td><input type="number" name="wr_45" id="wr_45" class="sum_41" min="0" max="5" tabindex="20"></td>
  </tr>
  
  <tr>
    <td>소계</td>
    <td><input type="number" name="wr_111" id="wr_111" class="sum_111" readonly></td>
    <td><input type="number" name="wr_222" id="wr_222" class="sum_222" readonly></td>
    <td><input type="number" name="wr_333" id="wr_333" class="sum_333" readonly></td>
    <td><input type="number" name="wr_444" id="wr_444" class="sum_444" readonly></td>
  </tr>
  
  <tr>
    <td>항 소계</td>
    <td colspan=2><input type="number" name="wr_555" id="wr_555" class="sum_555" readonly></td>
    <td colspan=2><input type="number" name="wr_666" id="wr_666" class="sum_666" readonly></td>
  </tr>
  
  <tr>
    <td>총계</td>
    <td colspan=4><input type="number" name="wr_999" id="wr_999" class="sum_999" readonly></td>
  </tr>
  </tbody>
</table>      
  
</body>
</html>

    소계를 구하시는 구간에 Math.round이거 빼셨어요

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

    회원로그인

    인기태그
    #그누보드5(59574) #영카트5(16788) #php(14969) #그누보드4(10633) #게시판(3157) #javascript(2634) #그누보드(2345) #css(2043) #mysql(1509) #모바일(1271) #영카트(1270) #그누커머스(1178) #html(1098) #jquery(1013) #자바스크립트(936) #최신글(932) #DB(818) #로그인(793) #이미지(762) #여분필드(736)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT