input 카운트 증가시 가격합산 방법
본문
<table>
<thead>
<tr>
<th>품명</th>
<th>가격</th>
<th>단위</th>
<th>수량</th>
</tr>
</thead>
<tbody>
<tr>
<td>상황버섯</td>
<td>25000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_12" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>생굼벵이</td>
<td>50000</td>
<td>1kg</td>
<td style="position:relative;">
<input type="text" name="wr_13" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>건조굼벵이</td>
<td>80000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_14" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>유산균 굼벵이환</td>
<td>120000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_15" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>유산균 굼벵이분말</td>
<td>120000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_16" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>홍굼보</td>
<td>35000</td>
<td>3.75g*10환</td>
<td style="position:relative;">
<input type="text" name="wr_17" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>꽃벵이과립</td>
<td>150000</td>
<td>120g*60포</td>
<td style="position:relative;">
<input type="text" name="wr_18" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>꽃벵이 젤리스틱</td>
<td>150000</td>
<td>20g*60포</td>
<td style="position:relative;">
<input type="text" name="wr_19" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>진하게달인 꽃벵이</td>
<td>190000</td>
<td>80ml*80포</td>
<td style="position:relative;">
<input type="text" name="wr_20" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>[애견간식]냠굼냠굼</td>
<td>9000</td>
<td>150g</td>
<td style="position:relative;">
<input type="text" name="wr_21" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<dl class="result_tag">
<dt>
<strong style="color:#f87b1f;">v</strong> 주문금액
</dt>
<dd style="line-height:2.8;">
<input type=hidden name="sell_price" value="10000" class="result">
<input type="text" value="0" readonly>원
</dd>
</dl>
<dl>
<dt style="line-height:16.4;">
<strong style="color:#f87b1f;">-</strong> 대표번호
</dt>
<dd>
<p>
<strong>온라인으로 상품 주문 시</strong><br>
해당 대표번호로 주문내용을 확인하여 주시기 바랍니다.<br>
주문내용 확인과 상품 및 구매절차에 대해 자세히 안내 받으실 수 있습니다.<br>
온라인 주문 후 확인전화가 없을 시, 주문 처리가 되지 않습니다.
</p>
<table style="border:1px solid #ddd;">
<tbody>
<tr>
<th style="border-bottom:1px solid #ddd;border-right:1px solid #ddd;background:#f7f7f7;font-weight:normal">대표번호1</th>
<td>*** 개인정보보호를 위한 휴대폰번호 노출방지 ***</td>
</tr>
<tr>
<th style="border-bottom:0px solid #ddd;border-right:1px solid #ddd;background:#f7f7f7;font-weight:normal">대표번호2</th>
<td>*** 개인정보보호를 위한 휴대폰번호 노출방지 ***</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
const form = document.querySelectorAll('table tbody tr');
const table = document.querySelectorAll('table');
const upBtn = document.querySelectorAll('.up');
const downBtn = document.querySelectorAll('.down');
const count = document.querySelectorAll('.count');
$(upBtn).click(function(){
let num = $(this).siblings('input').val();
num = $(this).siblings('input').val(num*1+1);
});
$(downBtn).click(function(){
let num = $(this).siblings('input').val();
num = $(this).siblings('input').val(num*1-1);
});
});
</script>
input들 값을 넘겨야해서 여분필드를 작성해놨습니다.
그리고 input 옆에 +- 버튼을 두어서 버튼들을 누르면 input value 값이 1씩 증감 하는 스크립트도 짜놓은 상태입니다.
문제는 카운트가 증가할때마다 가격이 더해져서 종합이 나오게 하고싶은데요 ㅠㅠ 이부분을 어떻게 처리해야할지 모르겠습니다. 뭔가 배열과 for문을 이용하면 될것같기도한데 어찌 해야할지 감이 안잡힙니다..
답변 2
count라는 class로 체크해서 jquery each 문으로 해서 해당 부분의 데이터가 변경될때마다 실행되도록 적용해 주시면 됩니다.
두분다 감사합니다 !! ㅠㅠ
$(".up, .down").on("click", function() {
var sum = 0;
$(".count").each(function() {
sum += parseInt($(this).val());
});
$(".result").val(sum);
});
감사합니다 !! ㅠㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
