테이블 jquery의 여러 개의 더하기 및 빼기 버튼이 작동하지 않습니다.

간단한 질문이지만 수정 방법을 모르겠습니다. 나는 여러 행을 가지고 있고 각 행에 대해 3 개의 요소 인 빼기 - 단추, 수량 및 더하기 - 단추가 있습니다. 모든 것은 괜찮 았지만 테이블에 행을 넣을 때 버튼은 수량 필드에 영향을 미치지 않습니다. 또한 레일을 사용하여 동적 테이블을 만들고 있지만 HTML로 생성 된 레일 코드를 작성했습니다. 나는 그것을 시도하고 코드는 다음과 같습니다테이블 jquery의 여러 개의 더하기 및 빼기 버튼이 작동하지 않습니다.

$('.add').click(function() { 
 
    if (!isNaN($(this).prev().val())) 
 
    $(this).prev().val(+$(this).prev().val() + 1); 
 
    else 
 
    $(this).prev().val(0); 
 
}); 
 
$('.sub').click(function() { 
 
    if ((!isNaN($(this).next().val())) && ($(this).next().val() > 0)) 
 
    $(this).next().val(+$(this).next().val() - 1); 
 
    else 
 
    $(this).next().val(0); 
 
});

button { 
 
    margin: 4px; 
 
    cursor: pointer; 
 
} 
 
input { 
 
    text-align: center; 
 
    width: 40px; 
 
    margin: 4px; 
 
    color: salmon; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <button name="button" type="button" class="sub btn btn-default">-</button> 
 
     </td> 
 
     <td> 
 
     <input name="quantity" type="text" id="1" value="0" class="field" /> 
 
     </td> 
 
     <td> 
 
     <button name="button" type="button" class="add btn btn-default">+</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <button name="button" type="button" class="sub btn btn-default">-</button> 
 
     </td> 
 
     <td> 
 
     <input name="quantity" type="text" id="2" value="0" class="field" /> 
 
     </td> 
 
     <td> 
 
     <button name="button" type="button" class="add btn btn-default">+</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<tbody> 
 
    <tr> 
 
    <td> 
 
     <button name="button" type="button" class="sub btn btn-default">-</button> 
 
    </td> 
 
    <td> 
 
     <input name="quantity" type="text" id="1" value="0" class="field" /> 
 
    </td> 
 
    <td> 
 
     <button name="button" type="button" class="add btn btn-default">+</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button name="button" type="button" class="sub btn btn-default">-</button> 
 
    </td> 
 
    <td> 
 
     <input name="quantity" type="text" id="2" value="0" class="field" /> 
 
    </td> 
 
    <td> 
 
     <button name="button" type="button" class="add btn btn-default">+</button> 
 
    </td> 
 
    </tr> 
 
</tbody>

출처

2016-06-01 Giannkas

다음 내용/.prev 전화 좀 무의미하다 :이 솔루션을 발견했다. 각 버튼은 표 셀 안에있는 하나의 태그이므로 형제가 없으므로 next/prev는 반환 할 것이 없습니다. 나는 당신이'quantity' 입력 값을 증가시키고 자하는 것 같아서,'$ this.parent(). find ('input [name = quantity]')'또는 무엇이든간에해야만합니다. –

이제 문제는 특정 '수량'입력을 선택해야하고 '입력 [이름 = 수량]'으로 '모든 수량을'수량 '으로 선택해야한다는 것입니다. 너 나 이해해? – Giannkas

DOM은 나무입니다. 모든 노드는 그 부모/자식을 알고 있고, 당신은 trivially 위/아래/옆으로 움직일 수 있습니다. 그래서 '$ this.parent.next'는 버튼 -> td (버튼 포함) -> td (입력) 입력에 도달하기 위해 "아래로"움직이는 문제 일뿐입니다. –

당신은 바로 마크 B 감사합니다.

$(this).parent().prev().children(".field")

$('.add').click(function() { 
 
    if (!isNaN($(this).parent().prev().children(".field").val())) 
 
    $(this).parent().prev().children(".field").val(+$(this).parent().prev().children(".field").val() + 1); 
 
    else 
 
    $(this).parent().prev().children(".field").val(0); 
 
}); 
 
$('.sub').click(function() { 
 
    if ((!isNaN($(this).parent().next().children(".field").val())) && ($(this).parent().next().children(".field").val() > 0)) 
 
    $(this).parent().next().children(".field").val(+$(this).parent().next().children(".field").val() - 1); 
 
    else 
 
    $(this).parent().next().children(".field").val(0); 
 
});

button { 
 
    margin: 4px; 
 
    cursor: pointer; 
 
} 
 
input { 
 
    text-align: center; 
 
    width: 40px; 
 
    margin: 4px; 
 
    color: salmon; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <button name="button" type="button" class="sub btn btn-default">-</button> 
 
     </td> 
 
     <td> 
 
     <input name="quantity" type="text" id="1" value="0" class="field" /> 
 
     </td> 
 
     <td> 
 
     <button name="button" type="button" class="add btn btn-default">+</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <button name="button" type="button" class="sub btn btn-default">-</button> 
 
     </td> 
 
     <td> 
 
     <input name="quantity" type="text" id="2" value="0" class="field" /> 
 
     </td> 
 
     <td> 
 
     <button name="button" type="button" class="add btn btn-default">+</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

출처

2016-06-01 22:56:12 Giannkas

테이블 jquery의 여러 개의 더하기 및 빼기 버튼이 작동하지 않습니다.

답변

관련 문제