我的表<tr class="item-row">中有两个静态元素，我需要用ajax调用中的数据替换它们。我已经为表单的其他功能准备好了它们，目前正在用ajax数据附加它们。我现在有另一个需要用相同的调用来"替换"它们，而不是追加？
我附加的javascript行是：$(".item-row:last").after('<tr class="item-row">...我不确定如何替换项行并将其保持在页面上的同一位置，以及在ajax中附加循环的其余部分。
我的工作原理是，它附加到现有的两个item-row上，在附加后隐藏/删除前两个CCD-3会更好吗？
HTML:
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<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="recall-product" href="javascript:;" title="Add Product">R</a>
</div></td>
<td class="description"><textarea form ="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost" form ="testinsert" name="item_cost[]">$150.00</textarea></td>
<td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
<td><span class="price" form ="testinsert" name="item_price[]">$150.00</span></td>
</tr>
<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="recall-product" href="javascript:;" title="Add Product">R</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[]">1</textarea></td>
<td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5">
<img src="images/rows.png" width="30px" height="auto" id="addrow" href="javascript:;" title="Add a row"/>
<img src="images/products.png" width="30px" height="auto" href="javascript:;" id="fill-invoice" class="add-invoice" title="Add Invoice"/>
<img src="images/products.png" width="30px" height="auto" href="javascript:;" id="recall_product" class="recall-product" title="Recall Product"/>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div id="owed" class="due">$0.00</div></td>
</tr>
</table>
FORM.JS:
$('.recall-product').live('click',function(){
var clickedRow = $(this).closest("tr");
var auto_id = $('#auto_num').val();
$("#product_div").css("display", "block");
//alert(auto_id);
$.ajax({
url: 'recall_product_fill.php?id='+auto_id,
data: {action:"invoice"},
dataType: 'json',
success: function(data){
populateSelectBoxes($('#product_div #ddproduct'), data);
function populateSelectBoxes($select, data) {
var products = [];
$.each(data, function() {
products.push($(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">'+ this.product +'</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[]">'+ this.description +'</textarea></td><td><textarea class="cost" form ="testinsert" name="item_cost[]">'+ this.cost +'</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty[]">'+ this.quantity +'</textarea></td><td><span class="price" form ="testinsert" name="item_price[]">'+ this.price +'</span></td></tr>'));
if ($(".delete").length > 0) $(".delete").show();
bind();
});
$select.append(products.join(''));
}
function populateTableRow(data, selectedProductAutonum) {
var products;
$.each(data, function() {
if (this.autonum == selectedProductAutonum) {
products = this;
return false;
}
});
}
$('#product_div #ddproduct li').click(function(e) {
var selection = $(this).attr("data-value");
$(this).parent().parent().parent().hide();
populateTableRow(data, selection);
$('ul').empty();
});
}
});
update_total()
});
如果我正确理解您的需求，如果您需要在ajax调用后替换静态tr，那么您需要首先删除它们，然后在表头后添加您从ajax新创建的tr。我为你制作了一把样品小提琴。
此外，我还对您的代码风格和使用的方法提出了一些建议。首先，永远不要在响应处理程序中创建任何函数。您应该在ajax调用之前创建函数，然后只调用它，而不是在每次调用时创建。其次，尝试将products.push方法分为几个小部分，以使代码更具可读性，您可以在ajax调用之外定义变量，并且只在每个ajax调用上重新分配它们的值。