테스트 사이트 - 개발 중인 베타 버전입니다

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

donghy1500 5년 전 조회 3,352

</p>

<p>   <table></p>

<p>                            <thead></p>

<p>                              <tr></p>

<p>                                <th>품명</th></p>

<p>                                <th>가격</th></p>

<p>                                <th>단위</th></p>

<p>                                <th>수량</th></p>

<p>                              </tr></p>

<p>                            </thead></p>

<p>                            <tbody></p>

<p>                                <tr></p>

<p>                                  <td>상황버섯</td></p>

<p>                                  <td>25000</td></p>

<p>                                  <td>200g</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_12" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>생굼벵이</td></p>

<p>                                  <td>50000</td></p>

<p>                                  <td>1kg</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_13" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>건조굼벵이</td></p>

<p>                                  <td>80000</td></p>

<p>                                  <td>200g</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_14" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>유산균 굼벵이환</td></p>

<p>                                  <td>120000</td></p>

<p>                                  <td>200g</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_15" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>유산균 굼벵이분말</td></p>

<p>                                  <td>120000</td></p>

<p>                                  <td>200g</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_16" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>홍굼보</td></p>

<p>                                  <td>35000</td></p>

<p>                                  <td>3.75g*10환</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_17" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>꽃벵이과립</td></p>

<p>                                  <td>150000</td></p>

<p>                                  <td>120g*60포</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_18" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>꽃벵이 젤리스틱</td></p>

<p>                                  <td>150000</td></p>

<p>                                  <td>20g*60포</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_19" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>진하게달인 꽃벵이</td></p>

<p>                                  <td>190000</td></p>

<p>                                  <td>80ml*80포</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_20" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                                <tr></p>

<p>                                  <td>[애견간식]냠굼냠굼</td></p>

<p>                                  <td>9000</td></p>

<p>                                  <td>150g</td></p>

<p>                                  <td style="position:relative;"></p>

<p>                                  <input type="text" name="wr_21" class="count" value="0"></p>

<p>                                  <p class="down">-</p></p>

<p>                                  <p class="up">+</p></p>

<p>                                  </td></p>

<p>                                </tr></p>

<p>                            </tbody></p>

<p>                        </table></p>

<p>                    </dd></p>

<p>                </dl></p>

<p>                <dl class="result_tag"></p>

<p>                        <dt></p>

<p>                         <strong style="color:#f87b1f;">v</strong> 주문금액                     </p>

<p>                        </dt></p>

<p>                    <dd style="line-height:2.8;"></p>

<p>                    <input type=hidden name="sell_price" value="10000" class="result"></p>

<p>                        <input type="text" value="0"  readonly>원</p>

<p>                    </dd></p>

<p>                </dl></p>

<p>                <dl></p>

<p>                        <dt style="line-height:16.4;"></p>

<p>                         <strong style="color:#f87b1f;">-</strong> 대표번호                     </p>

<p>                        </dt></p>

<p>                    <dd></p>

<p>                        <p></p>

<p>                            <strong>온라인으로 상품 주문 시</strong>
</p>

<p>                            해당 대표번호로 주문내용을 확인하여 주시기 바랍니다.
</p>

<p>                            주문내용 확인과 상품 및 구매절차에 대해 자세히 안내 받으실 수 있습니다.
</p>

<p>                            온라인 주문 후 확인전화가 없을 시, 주문 처리가 되지 않습니다.</p>

<p>                        </p></p>

<p>                        <table style="border:1px solid #ddd;"></p>

<p>                            <tbody></p>

<p>                                <tr></p>

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

<p>                                    <td>010-8549-8786</td></p>

<p>                                </tr></p>

<p>                                <tr></p>

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

<p>                                    <td>010-8549-8786</td></p>

<p>                                </tr></p>

<p>                            </tbody></p>

<p>                        </table></p>

<p> </p>

<p><script></p>

<p>    $(document).ready(function(){</p>

<p>    const form = document.querySelectorAll('table tbody tr');</p>

<p>    const table = document.querySelectorAll('table');</p>

<p>    const upBtn = document.querySelectorAll('.up');</p>

<p>    const downBtn = document.querySelectorAll('.down');  </p>

<p>    const count = document.querySelectorAll('.count');</p>

<p>    </p>

<p>    $(upBtn).click(function(){</p>

<p>        let num = $(this).siblings('input').val();</p>

<p>        num = $(this).siblings('input').val(num*1+1);</p>

<p>     });</p>

<p> </p>

<p>     $(downBtn).click(function(){</p>

<p>        let num = $(this).siblings('input').val();</p>

<p>        num = $(this).siblings('input').val(num*1-1);</p>

<p>     });</p>

<p>    });</p>

<p></script></p>

<p>

 

input들 값을 넘겨야해서 여분필드를 작성해놨습니다. 

그리고 input 옆에 +- 버튼을 두어서 버튼들을 누르면 input value 값이 1씩 증감 하는 스크립트도 짜놓은 상태입니다.

문제는 카운트가 증가할때마다  가격이 더해져서 종합이 나오게 하고싶은데요 ㅠㅠ 이부분을 어떻게 처리해야할지 모르겠습니다. 뭔가 배열과 for문을 이용하면 될것같기도한데 어찌 해야할지 감이 안잡힙니다..

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

답변 2개

</p>

<p>$(".up, .down").on("click", function() {

    var sum = 0;

    $(".count").each(function() {

        sum += parseInt($(this).val());

    });</p>

<p>    $(".result").val(sum);

});</p>

<p>

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

답변에 대한 댓글 1개

d
donghy1500
5년 전
감사합니다 !! ㅠㅠㅠ

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

플라이
5년 전

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

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

답변에 대한 댓글 1개

d
donghy1500
5년 전
두분다 감사합니다 !! ㅠㅠ

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

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

로그인