Question

我的表<tr class="item-row">中有两个静态元素，需要用ajax调用中的数据替换。我已经将它们放置在表单的其他功能中，并且当前正在使用ajax数据附加到它们。我现在还需要用相同的调用而不是追加来“替换”它们？

我附加的javascript行是：$(".item-row:last").after('<tr class="item-row">...我不确定要替换项目行并将其保留在页面上的相同位置，还是将其余的循环附加到ajax中。 / p>

我的作品可以添加到现有的两个作品中，是否最好在附加后隐藏/删除前两个item-row？

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()
});

Answer 1

如果我正确理解您的要求，如果需要在ajax调用后替换静态tr，则需要先删除它们，然后在表头之后从ajax追加新创建的tr。我为您创建了一个示例fiddle。

我还为您的代码风格和使用方法提供了一些建议。首先，永远不要在响应处理程序中直接创建任何函数。您应该在ajax调用之前创建函数，然后仅对其进行调用，而不是在每次调用时都进行创建。其次，尝试将products.push方法分成几小段，以使代码更具可读性，您可以在ajax调用之外定义变量，而仅在每个ajax调用中重新分配它们的值。

jQuery用动态元素替换两个静态元素

1 个答案: