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

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

javascript jquery html css

Javascript 如何获取动态克隆的表文本框值？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,全部, <html> <body> <table> <tbody> <tr><td> <table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product"> <thead><tr> <td clas

全部,

 <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>

我有一个表，我正在克隆点击按钮，克隆表后，我需要做一些计算克隆表以及在父表。我的问题是，我无法对每个appendedclone表进行计算。我的意思是我写了一个关于模糊的函数来计算textbox的值，但是当我克隆表时，因为所有textbox的类名都是相同的，所以在父表和克隆表中，我的结果显示在所有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>

以及我正在使用的脚本：

 <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>

$+数量\u属性+.产品数量结果为空，未选择任何元素，因为您已将父项qty\u id中的产品数量添加到qty\u attr

 <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>

$+数量/属性工作

 <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>

您的代码中还有许多其他错误，使模糊/更改例程运行了两次，等等。我已对此进行了一些清理：

 <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>

$document.readyfunction{ var parent_qty_id=$product tbody:first.attr'id'； var qty\u attr=父项qty\u id+tr：第一个产品数量； $+数量属性函数{ var product_qty=$this.val，product_list_price=$'product tr td.product list price'.val，总计；合计=产品数量*产品清单价格； var val=$this.children； $val.valtotal+'.00'； }; $btnaddProduct.ClickFunction{ e、防止违约； var count=$tbody.product_details.length+1； var tblid=$product tbody:first.attr'id'； var newid=tblid+u+计数； $'product tbody:first'.clonetrue.insertAfter'product>tbody:last'.attrid，newid； $'tableproduct>tbody:last>tr:first input'.val'； $'tableproduct>tbody:last>tr:last input'.val'； $：text.product-qty.last.val； }; };

可能需要进一步调整。

标记中的按钮在哪里？请为此设置一个提琴。我已在html下面添加了添加按钮。嗨！Vins这是我的JSFIDLE链接，我做了一个测试，至少行添加可以在其中工作。

 <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>