在Jquery重复表行中添加总计

时间:2011-08-31 14:51:36

标签: javascript jquery html

我有一个包含用于输入数值的文本字段的表。该字段位于重复的行表中。字段ID是“金额”。我想在ID为'amount'的文本字段中添加所有值,并在名为'totals'的文本字段中显示总和,该文本字段位于单独的表中,但形式相同。我对jquery的经验有限,我实际上设法在堆栈溢出的阅读帖子上创建和删除表行。 我尝试使用each()但它只适用于第一行,即默认行。

$("#addrow").click(function(){
        alert("It works.");


        //$('#description tr:last').after('<tr>...</tr>');
         $('#description tr:last').after('<tr><td align="center"><label for="description"></label><input name="description"type="text"style="background-color:#CCC;" id="description" size="70"/></td><td align="center"><label for="amount"></label><input type="text"style="background-color:#CCC;"name="amount"id="amount"/></td><td>&nbsp;</td><td>&nbsp;</td></tr>');

});

添加值的代码就是这个(从站点获取):

 $("#amount").each(function() {

        $(this).keyup(function(){
            calculateSum();
        });
    }); 
    function calculateSum()
     {

    var sum = 0;
    //iterate through each textboxes and add the values
    $("#amount").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2)); 
    }

但是如上所述,它仅适用于使用html加载的第一个默认行。使用jquery添加行后输入的值不会被总结。

1 个答案:

答案 0 :(得分:2)

这是因为你正在使用一个你应该使用我认为的类的id。

$("#amount") //using each here makes no sense as you have only one element returned

只匹配第一个id

$(".amount")

将匹配所有出现的事件。尝试相应地更改你的HTML,一切都应该工作