1

全て、

ボタンをクリックしてクローンを作成しているテーブルがあります。テーブルのクローンを作成した後、クローンテーブルと親テーブルでいくつかの計算を行う必要があります。私の問題は、追加された（クローン）テーブルごとに計算を実行できないことです。テキストボックスの値を使用して計算を行うonblur関数を作成したのですが、クラス名がすべてのテキストボックスで同じであるため、テーブルのクローンを作成すると、親テーブルとクローンテーブルで、テーブルの対応する部分ではなくすべてのテキストボックスに結果が表示されます。これが私のテーブルと私がフォローしている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>
4

1 に答える 1

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

にすでに追加されているため、空になります (要素が選択されていませ.product-qtyんparent_qty_id) qty_attr。

$("#"+qty_attr)

動作します。

あなたのコードには他にも多くのエラーがあり、ぼかし/変更ルーチンが 2 回実行されるなどのエラーが発生しました。

$(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-11T08:54:14.370 に答える