input 카운트 증가시 가격합산 방법

Copy
<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>010-8549-8786</td>

                                </tr>

                                <tr>

                                    <th style="border-bottom:0px solid #ddd;border-right:1px solid #ddd;background:#f7f7f7;font-weight:normal">대표번호2</th>

                                    <td>010-8549-8786</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개 / 댓글 2개

Copy
$(".up, .down").on("click", function() {
    var sum = 0;
    $(".count").each(function() {
        sum += parseInt($(this).val());
    });

    $(".result").val(sum);
});

답변에 대한 댓글 1개

감사합니다 !! ㅠㅠㅠ

count라는 class로 체크해서 jquery each 문으로 해서 해당 부분의 데이터가 변경될때마다 실행되도록 적용해 주시면 됩니다.

답변에 대한 댓글 1개

두분다 감사합니다 !! ㅠㅠ

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