Question

所有

我在点击按钮时克隆了表格，克隆表格后我需要在克隆表格和父表格中进行一些计算。我的问题是我无法对每个附加（克隆）表进行计算。我的意思是我写了一个on blur函数来用textbox值进行计算，但是当我克隆表时，因为所有textbox的类名都相同，所以在parent和cloned table中我的结果显示在所有textbox而不是表的相应部分。这是我的表和我正在遵循的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>

Answer 1

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

因为您已将.product-qty中的parent_qty_id添加到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(); 
    });

});

可能需要进一步调整。

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

1 个答案: