如何获取动态克隆表文本框的值？

全部，如何获取动态克隆表文本框的值？

我有克隆表上的按钮和克隆表后，我需要克隆表中以及在父表中做少量计算。我的问题是我无法对每个附加（克隆）表进行计算。我的意思是我写了一个模糊函数来计算文本框的值，但是当我克隆表时，因为类名相同的所有文本框，在父和克隆的表中我的结果显示在所有文本框中而不是相应的表部分。这是我的表格和我正在遵循的jQuery代码。

<html> 
    <body> 
    <table> 
    <tbody> 
    <tr><td> 
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product"> 
    <thead><tr> 
      <td class="mandatory"> * Product Name </td> 
      <td class="label"> Qty.in Stock</td> 
      <td class="mandatory">* Qty </td> 
      <td class="mandatory">* Unit Price</td> 
      <td class="mandatory">* List Price</td> 
      <td class="mandatory">* Total</td> 

     </tr> 
    </thead> 
    <tbody class="product_details" id="tbody_product"> 
    <tr class="tr_product_details"> 
    <td> 
      <input type="text" name="txtproductName[]" id="product-name" /> 
      <a href=""> 
      <img width="17" height="16" src="images/Products_small.gif"> </a> 
      <input type="hidden" name="productid[]" id="productid" /> 

    </td> 
    <td> 
     <input type="text" name="txtqtyStock[]" id="productstock" /> 
    </td> 
    <td> 
     <input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" /> 
    </td> 
    <td> 
     <input type="text" name="txtUnitPrice[]" id="product-price" /> 
    </td> 
    <td> 
     <input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price" 
     /> 
    </td> 
    <td><div style="margin-left:120px;"> 
     <input type="text" name="txtTotal[]" size="10" class="total-price" /> 
     </div> 
    </td> 

    </tr> 
    <tr> 
    <td colspan="5"> <a href="javascript:;" class="anchor-blue product-description" id="product-description"><img width="17" height="16" src="images/spacer.gif">Product Description </a></td> 
    </tr> 
    <tr> 
    <td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea> 
    </td> 
    <td colspan="1" class="tbl"> 
     <table > 
     <tr> 
      <td><a href="javascript:;" class="anchor-blue discount">Discount: </a></td> 
      <td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td> 
     </tr> 
     <tr> 
      <td class="label">Total After Discount: </td> 
      <td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td> 
     </tr> 
     <tr> 
      <td> <a href="javascript:;" class="anchor-blue tax">Tax: </a></td> 
      <td><input type="text" name="txtProductTax[]" size="10" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="label"> Net Total: </td> 
      <td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td> 

     </tr> 


     </table> 

     </td> 
    </tr> 

</tbody> 
    </table> 
    <table align="left" style="margin-left:20px;"> 
    <tr> 
     <td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td> 
    </tr> 
    </table> 
</body> 
</html>

我的脚本，我使用：

<script type="text/javascript"> 

$(document).ready(function() { 

       var parent_qty_id = $("#product tbody:first").attr('id'); 
       var qty_attr = parent_qty_id+" tr:first .product-qty"; 

       $("#"+qty_attr+" .product-qty").bind("blur change",function(){ 
       var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total; 
       total = product_qty * product_list_price; 
       // alert($(this).children().children().attr("class")); 
       // $(this).children().children().attr("class"); 
        var val = $(this).children(); 
        $(val).val(total+'.00'); 
    }); 


        $("#btnaddProduct").click(function() { 
        var count = ($("tbody .product_details").length) + 1; 
        var tblid = $("#product tbody:first").attr('id'); 
        var newid = tblid+"_"+count; 
        $('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid); 

        $('table#product > tbody:last > tr:first input').val(' '); 
        $('table#product > tbody:last > tr:last input').val(' '); 
        $(":text.product-qty").last().val(); 
        return false; 
        }); 


       }); 

</script>

来源

2012-09-11 Sanjoy Dey

标记中的按钮在哪里？ –

请为此设置一个小提琴。 – Vins

我在html的下面添加了添加按钮。 –

$("#"+qty_attr+" .product-qty")

出来空的（没有选择的元素），因为你已经在parent_qty_id添加.product-qty到qty_attr。

$("#"+qty_attr)

作品。

有很多其他错误在你的代码所做的模糊/更改程序运行两次，等我消毒，它的一些这个：大概需要

$(document).ready(function() { 
    var parent_qty_id = $("#product tbody:first").attr('id'); 
    var qty_attr = parent_qty_id+" tr:first .product-qty"; 

    $("#"+qty_attr).blur(function(){ 
     var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total; 
     total = product_qty * product_list_price; 
     var val = $(this).children(); 
     $(val).val(total+'.00'); 
    }); 

    $("#btnaddProduct").click(function(e) { 
     e.preventDefault(); 
     var count = ($("tbody .product_details").length) + 1; 
     var tblid = $("#product tbody:first").attr('id'); 
     var newid = tblid+"_"+count; 
     $('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid); 

     $('table#product > tbody:last > tr:first input').val(' '); 
     $('table#product > tbody:last > tr:last input').val(' '); 
     $(":text.product-qty").last().val(); 
    }); 

});

进一步调整。

来源

2012-09-11 08:54:14

如何获取动态克隆表文本框的值？

回答

相关问题