ruby on rails - Multiple plus and minus buttons in a table jquery do not work -
it simple question don't know how fix. have several rows , each row there 3 elements, minus-button, quantity , plus-button. ok when put rows inside table, buttons don't have effect on quantity field. moreover, i'm creating dynamic table rails wrote code rails generated in html. have tried , code is:
$('.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>
you right marc b, thanks. found solution:
$(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>