[HTML&JQUERY & SPRING] 버튼 클릭 시, 숫자 증감/감소 기능

안녕하세요. 버튼을 클릭할 경우에 숫자가 증가하고 감소하는 기능을 구현하려 합니다.

(코드를 재수정하였습니다.2020년 12월)

 

화면 부분부터 보면..

 

 

HTML 부분입니다.

<tr style="text-align:center;">
    <td>수량</td>
    <td class="bseq_ea">7</td>
    <td>
        <button type ="button" onclick="fnCalCount('p',this);">+</button>
        <input type="text" name="pop_out" value="0" readonly="readonly" style="text-align:center;"/>
        <button type="button" onclick="fnCalCount('m', this);">-</button>
    </td>
</tr>

 

button onclick 속성에 값을 넣어주고 this 를 넣어 자기 자신 값을 부여합니다.

또한 p와 m을 넣어줘서 type을 구분할 수 있도록 합니다.

input 에서는 디비와 연동할 수 있도록  name 값을 넣어줍니다.

 

 

다음은 SCRIPT 부분입니다.

function fnCalCount(type, ths){
    var $input = $(ths).parents("td").find("input[name='pop_out']");
    var tCount = Number($input.val());
    var tEqCount = Number($(ths).parents("tr").find("td.bseq_ea").html());
    
    if(type=='p'){
        if(tCount < tEqCount) $input.val(Number(tCount)+1);
        
    }else{
        if(tCount >0) $input.val(Number(tCount)-1);    
        }
}
 

 

첫번째 변수부터 보면...부모부분인 td의 자식 name pop_out 부분을 넣어줍니다.

두번째 변수는 pop_out을 숫자로 변환시키고, (변수 $input)

세번째 변수는 수량보다 숫자가 초과되지 않도록 설정하기 위해서 수량 부분을 변수에 넣어줍니다.

(td class="bseq_ea")

 

만약에 pop_out이 td class="bseq_ea"의 수량인 7보다 작을 경우 pop_out은 +1씩 늘어나고 ,

pop_out이 0보다 클 경우 -1씩 값을 넣는다는 코드입니다.

 

 

화면을 보면 완료된 것을 확인할 수 있습니다.