Блог

Главная - Вопросы по программированию - Автоматическая сумма для горизонтальных цифровых блоков не работает

Автоматическая сумма для горизонтальных цифровых блоков не работает

#jquery

#jquery

Вопрос:

Я пытаюсь использовать функцию автоматической суммы для 3 горизонтальных блоков, ни автоматическая сумма не работает, и я не уверен, что пошло не так со свойством readonly, даже это не работает для меня.

ниже приведен мой код.

 <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#t3").prop('readOnly',true);
    var sum=0;
    for(var i=1;i<=2;i  )
    {
        $("#t" i).keyup(function(){
            sum=sum parseInt(this.val());
        });
    }
    $("#t3").val(sum);
});
</script>
</head>
<body>
<table>
    <tr>
        <td id="t1"><input type="text"></td>
        <td id="t2"><input type="text"></td>
        <td id="t3"><input type="text"></td>
    </tr>
</table>
</body>
</html>

Ответ №1:

Привязать событие к input ‘s, а не к td ‘s:

 <script>
$(document).ready(function(){
    $("#t3  input").prop('readOnly',true);
    var sum=0;
    for(var i=1;i<=2;i  )
    {
        $("#t" i   " input").keyup(function(){
            sum=sum parseInt(this.val());
        });
    }
    $("#t3 input").val(sum);
});
</script>

Ответ №2:

Привязка кода внутри for цикла — это нехорошо, пишите код обычно.

Попробуйте,

 $('#t1,#t2 input').keyup(function(){
    var val1 = parseInt($('#t1 input').val(),10);
    var val2 = parseInt($('#t2 input').val(),10)
    var res = (isNaN(val1)?0:val1)   (isNaN(val2)?0:val2)
    $('#t3 input').val(res);
});

УДАЛИТЕ ЭТУ ЗАЧЕРКНУТУЮ ЧАСТЬ ИЗ ВАШЕГО КОДА:

     var sum=0;
    for(var i=1;i<=2;i  )
    {
        $("#t" i).keyup(function(){
            sum=sum parseInt(this.val());
        });
    }
    $("#t3").val(sum);

ДЕМОНСТРАЦИЯ

Обновление для вашего нового требования,

 $('tr td:nth-child(3) input').prop('disabled', true);

$('tr td input:not(:disabled)').keyup(function () {

    var res = $(this).closest('tr').find("input:not(:disabled)").map(function(){
        return isNaN(parseInt(this.value, 10)) ? 0 : parseInt(this.value, 10);
    }).get().reduce(function (a, b) {
        return a   b
    }, 0);

    $(this).closest('tr').find("input:disabled").val(res);

});

ДЕМОНСТРАЦИЯ

Комментарии:

1. Спасибо, я проверил демонстрацию .. однако у меня есть несколько таких строк, поэтому я хочу использовать их в цикле .. будет ли этот способ работать и в цикле?

2. @user2866314: Да, это сработало, но мое требование — использовать это в цикле .. Ниже то, что я использую <script> $(document) . готово(function() { $(«#t3»).find(«ввод»).prop(‘Только для чтения’, true); var sum = 0; for (var i = 1; i <= 2; i ) { $(«#t» i).найти («ввод»). keyup(function() { sum = sum parseInt($(this).find(«ввод»).val(),10); }); } $(«# t3»).find(«ввод»).val(isNaN(сумма)?0: сумма); }); </script>

Метки: