javascript - 如何使用嵌套属性和选定的组合框选项创建实时乘法？

Question

我知道我的问题真的很奇怪，或者没有意义，或者会有问题，但我对此进行了调查，但没有找到有关我的演示的示例。

我创建了一个嵌套表单，因此当我添加新行时给我一个像这样的长名称

<input id="shopping_document_shopping_products_attributes_0_qty" name="shopping_document[shopping_products_attributes][0][qty]" size="9" type="text">
<input id="shopping_document_shopping_products_attributes_1_qty" name="shopping_document[shopping_products_attributes][1][qty]" size="9" type="text">
<input id="shopping_document_shopping_products_attributes_2_qty" name="shopping_document[shopping_products_attributes][2][qty]" size="9" type="text">
....
<input id="shopping_document_shopping_products_attributes_X_qty" name="shopping_document[shopping_products_attributes][X][qty]" size="9" type="text">

所以我将有无限行，但我尝试在每一行中与所选数量进行乘法运算，最后得到总和

<input id="shopping_document_shopping_products_attributes_0_qty" name="shopping_document[shopping_products_attributes][0][qty]" size="9" type="text">

<option value="">Seleccione</option><option value="106">Impresora RG</option>
  <option value="107">Celular Galaxy J. Astete</option>
  <option value="108">Trapo</option></select>
</option>

注意 name= "shopping_document[shopping_products_attributes][X][qty]"所以它应该能够在演示中工作超过 4 行，符号 X 意味着如果我添加 5 行，实时乘法将工作

示例如下:

这是demo

请问有人可以帮我创建这个吗？

我将非常感谢所有类型的帮助。

别对我不好，我只是想学习，但没有找到这个案例的例子

一位来自 stackoverflow 的 friend 给了我这个 demo但我在演示中使用的是原型(prototype) 1.6.0.3 和 jquery min 1.4.0，效果完美，但在生产中会产生冲突并显示错误，其余操作无法正常工作。

这是屏幕截图

Answer 1

http://jsfiddle.net/bu8da52u/

$(document).ready(function(){
    var tbl = $("#products");
    //clone the first row for later duplication
    var tmplt = $(tbl).find("tr").eq(1).clone();

    //when add button is clicked add a row
    tbl.on("click", ".add", function(){
        tmplt.clone().appendTo(tbl);    });

    //when the remove button is clicked
    tbl.on("click", ".remove", function(){
        //Remove if there is more than just one row 
        if(tbl.find("tr").length > 2){
            $(this).closest("tr").remove();
        }
    });

    //calculate the sum
    tbl.on("change keyup", ".qty input, .product select, .cost select", function(){
        var sum = parseFloat($(this).parent().parent().find(".qty input").val()) * parseFloat($(this).parent().parent().find(".cost select").val());
        $(this).parent().parent().find(".sum input").val(sum.toFixed(2));
    });
});