테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

숫자입력시 자동합계 새로고침 문제 채택완료

바케스터 2년 전 조회 2,445
답변 2
목록

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

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

 

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

 

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

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

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

 

 

 

</p>

<p><html lang="ko">

<head>

<meta charset="utf-8">

<meta http-equiv="imagetoolbar" content="no">

<meta http-equiv="X-UA-Compatible" content="IE=Edge"></p>

<p>        <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></p>

<p><body></p>

<p><script src="<a href="https://code.jquery.com/jquery-1.12.4.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.12.4.min.js"></script></a>

<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()));

    });

});</p>

<p>$(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()));</p>

<p>         $('input[name=wr_999]').val(Math.round($('input[name=wr_555]').val()) + ($('input[name=wr_666]').val()));</p>

<p>    });

});</p>

<p></script></p>

<p>

<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></p>

<p>  </tbody>

</table>      

  </p>

<p></body>

</html></p>

<p> </p>

<p> </p>

<p>

 

#그누보드5 #자바스크립트
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
개
개노미
2년 전

</p>

<p><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="<a href="https://code.jquery.com/jquery-1.12.4.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.12.4.min.js"></script></a>

<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></p>

<p><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></p>

<p>

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�
개노미
2년 전
비타주리님 답변처럼
Math.round => Number로 바꾸는게 좋아보이네요
�
바케스터
2년 전
넵... .역시 개노미님... 다시 도움받게되네요... 감사합니다. ^^

댓글을 작성하려면 로그인이 필요합니다.

비

aaa.value 는 문자열입니다.

Number(aaa.value) 숫자형으로 치환하세요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인