добавление функции итога к нескольким строкам

Я сделал свой сценарий, чтобы дать уникальный идентификатор для каждого поля

 <script type="text/javascript">
    function calculateSum() {
        var sum = 0;
        $(".price").each(function() {
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });
        $("#sum").html('&pound;' + sum.toFixed(2));
    }
    $(document).ready(function(){       
        $('.del').live('click',function(){
            $(this).parent().parent().remove();
        });
        $('.add').live('click',function(){
            $(this).val('Delete');
            $(this).attr('class','del');
            var appendTxt = "<tr><td><input name='item[]' type='text' size='40' /></td><td><input name='qty[]' type='text' size='5' value='0' /></td><td><input class='price' name='price[]' id='price' type='text' size='20' value='0.00' /></td><td><input name='total[]' class='total' id ='total' type = 'text' size='50' value='0'></td><td><input type='button' class='add' value='Add Row' /></td></tr>";
            $("tr:last").after(appendTxt);  
        });
        $('.price').live('keyup', function() {
            calculateSum();
        });         
    });
    </script>
</head>

работает !! добавьте файл библиотеки jquery 1.9.1 в указанный выше код.

Я надеюсь понять... вычислить общее количество каждой строки (также новые, если добавлено).

вам нужно немного рефакторинга по HTML:

1. Не использовать уникальный идентификатор (потому что вам нужно добавить больше формы, как показано на рисунке) - id="price" id="total" удалить их.
2. Добавьте класс qty в поле с именем qty[] (я предпочитаю найти элемент)

ow добавляет новую функцию для вычисления общего количества в каждой строке:

  function calculateTotal(){
    $("#options-table tr").not(":eq(0)").each(function(){ //.not(":eq(0)") first is header of table
        var pr = parseInt($(this).find(".price").val());
        var q = parseInt($(this).find(".qty").val());
        $(this).find(".total").val(pr*q); 
    });
  }

каждый раз, когда вы вызываете эту функцию, js вычисляет общее количество всех строк.

это для вычисления только одно:

  function calculateRowTotal($row){ // $row must be one of your $("tr")
        var pr = parseInt($row.find(".price").val());
        var q = parseInt($row.find(".qty").val());
        $row.find(".total").val(pr*q); 
  }

весь код с некоторыми изменениями:

HTML:

<table id="options-table">                   
    <tr>
        <td>Item</td>
        <td>Qty</td>
        <td>Price</td>
        <td>Total</td>
        <td>&nbsp;</td>
    </tr>                  
    <tr>
        <td><input name="item[]" type="text" size="40" /></td>
        <td><input name="qty[]" class="qty" type="text" value="0" size="5" /></td>
        <td><input name="price[]" class="price" type="text" value="0.00" size="20" /></td>
        <td><input name="total[]" class="total" type = "text" size="50"></td>
        <td><input type="button" class="add" value="Add Row" /></td>
    </tr>
</table>
<br /><br />
<div id="sum">&pound;0.00</div>

JS:

function calculateSum() {
    var sum = 0;
    $(".total").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#sum").html('£' + sum.toFixed(2));
}
function calculateTotal(){
    $("#options-table tr").not(":eq(0)").each(function(){ //.not(":eq(0)") first is header of table
        var t = parseInt($(this).find(".price").val()) * parseInt($(this).find(".qty").val());
        if(isNaN(t)) return alert("insert only number inside of fileds, please");
        $(this).find(".total").val(t); 
    });
  }
$(document).ready(function(){       
    $('.del').live('click',function(){
        $(this).parent().parent().remove();
    });
    $('.add').live('click',function(){
        $(this).val('Delete');
        $(this).attr('class','del');
        var appendTxt = "<tr><td><input name='item[]' type='text' size='40' /></td><td><input name='qty[]' type='text' size='5' value='0' /></td><td><input class='price' name='price[]' id='price' type='text' size='20' value='0.00' /></td><td><input name='total[]' class='total' id ='total' type = 'text' size='50' value='0'></td><td><input type='button' class='add' value='Add Row' /></td></tr>";
        $("tr:last").after(appendTxt);  
    });
    $('.price, .qty').on('change', function() {
        calculateTotal();
        calculateSum();
    });         
});