javascript - 在 Jquery 重复表行中添加总计

Question

我有一个表格，其中有一个用于输入数值的文本字段。该字段在重复行表中。字段 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 添加行后输入的值没有被汇总。

Answer 1

这是因为您在我认为应该使用类的地方使用了 id。

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

只匹配第一个id而

$(".amount")

会匹配所有的出现。尝试相应地更改您的 html，一切都应该有效