水平数字框的自动求和不起作用

我正试图使用自动求和功能为3水平框，既不自动求和工作，也不确定只读属性出了什么问题，即使这是不适合我。

下面是我的代码。

<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>

将事件绑定在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>

在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);
});

演示

相关内容

最新更新

热门标签：