Question

我正在尝试为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>

Answer 1

将input上的事件绑定在td上：

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

Answer 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);~~

DEMO

更新您的新要求，

$('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);

});

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

2 个答案:

DEMO

DEMO