숫자입력시 자동합계 새로고침 문제
본문
각 항목을 더해서 소계를 만들고 그것들의 합계 그리고 총계가 자동으로 계산되게 만들었습니다.
(개노미님이 알려주신내용을 참조해서 만들었습니다. )
원래는 잘 작동했었는데요... 2항이 새로 생겨서 제 나름대로 확장했습니다.
자바를 잘 모르는 입장에서 어떻게든 수정하려했는데
아래와 같이 합계가 더하는게 아니고 합쳐지네요. ㅠㅠ
자바 너무 어려워요.. ... 그럼 선배님들 부탁드립니다.
<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>
답변 2
<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이거 빼셨어요
비타주리님 답변처럼
Math.round => Number로 바꾸는게 좋아보이네요
넵... .역시 개노미님... 다시 도움받게되네요... 감사합니다. ^^
aaa.value 는 문자열입니다.
Number(aaa.value) 숫자형으로 치환하세요.
답변을 작성하시기 전에 로그인 해주세요.