通过动态名称元素填充动态jQuery字段

Question

i有一个动态部分，用于从数据库中带有AJAX调用的产品。有些结果是单行，而另一些则是多行。我在主页上有HTML的占位符行。这用于初始数据输入，可以用Java删除或添加其他行。我所需的操作是通过AJAX调用计数从数据库中撤回的行返回的行并添加/填充结果。我敢肯定，我需要先删除占位符，然后在每行返回时重新创建HTML。同样不确定如何使用item_desc[]的现有name字段填充JQuery元素。我知道id是唯一的，类可能是多个，所以我唯一的选择是name元素。

html：

<tr class="item-row">
          <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
          <a class="delete" href="javascript:;" title="Remove row">X</a>
          <a class="add-product" href="javascript:;" title="Add Product">A</a>
          </div></td>
          <td class="description"><textarea form ="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea></td>
          <td><textarea class="cost" form ="testinsert" name="item_cost[]">$95.00</textarea></td>
          <td><textarea class="qty" form ="testinsert" name="item_qty[]">0</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
</tr>

jQuery：

function populateTableRow(data, selectedProductAutonum) {
                var invoices;
                $.each(data, function() {
                    if (this.autonum == selectedProductAutonum) {
                        invoices = this;
                        return false;
                    }
                });
                $('[name="item_desc[0]"]').val(invoices.description);
                $('[name="item_cost[0]"]').val(invoices.cost);
                $('[name="item_qty[0]"]').val(invoices.quantity);
                $('[name="item_price[0]"]').val(invoices.price);
            }

Answer 1

您需要通过从Ajax获得的数据迭代并附加元素，如果您已经有元素，我假设它们也必须具有唯一的名称，否则您将无法得到该元素您可以通过以下

拥有唯一的名称

 <td class="description"><textarea form ="testinsert" name="item_desc[0]">Residential Rate: Consulting/Labor/Installs</textarea></td>

之后，您可以使用它查看元素名称或ID

$('[name="item_desc[0]"]');
$('[id="item_desc[0]"]');

如果您没有创建的元素，则可以轻松地使用handlebar.js

来创建

如果您需要进一步帮助，请告诉我。

或如果您没有唯一的ID或表中元素的唯一名称，则可以使用其他选择器在表中迭代以放置值。

编辑：

$( document ).ready(function() {
  var data=[{
description:"Hi description ",cost:0.00,quantity:12,price:99.99,autonum:"mine",item_name:"item name"
},{
description:"Hi description 2",cost:2.00,quantity:2,price:199.99,autonum:"mine1",item_name:"item name"
}];
populateTableRow(data,"mine")
});
function populateTableRow(data, selectedProductAutonum) {
                var invoices;
if(data!=undefined && data.length>0){
				 alert(data.length);
				$("#YourCountElement").text(data.length);//if its span or div
				$("#YourHiddenOrInputCountElement").val(data.length)//if its input or hidden then 
				}
                $.each(data, function() {
                    if (this.autonum == selectedProductAutonum) {
                       assignValueToTable(this);
					   invoices = this;
                        return false;
                    }
                });
            }
			
			function assignValueToTable(invoices){
				$('[name="item_name[0]"]').val(invoices.item_name);
                $('[name="item_desc[0]"]').val(invoices.description);
                $('[name="item_cost[0]"]').val(invoices.cost);
                $('[name="item_qty[0]"]').val(invoices.quantity);
                $('[name="item_price[0]"]').val(invoices.price);
			}

<table>
    <tr class="item-row">
        <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[0]">Hourly Rate</textarea>
        <a class="delete" href="javascript:;" title="Remove row">X</a>
        <a class="add-product" href="javascript:;" title="Add Product">A</a>
        </div></td>
        <td class="description"><textarea form ="testinsert" name="item_desc[0]">Residential Rate: Consulting/Labor/Installs</textarea></td>
        <td><textarea class="cost" form ="testinsert" name="item_cost[0]">$95.00</textarea></td>
        <td><textarea class="qty" form ="testinsert" name="item_qty[0]">0</textarea></td>
        <td><span class="price" form ="testinsert" name="item_price[0]">$95.00</span></td>
</tr>
</table>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>