Question

我在帐单上有一个空白的tr行，作为占位符。这使我可以从数据库中提取带有$(".item-row:last").after...的ajax数据-我需要同一个处理程序来同时删除原始的$(".item-row:first")（占位符）。我可能会向后看-没有空白的tr会更有意义吗？

在某些情况下，我希望在那里的占位符作为默认产品，例如小时费率，因此需要它。

有几种方法很接近，但不能解决在:first之后创建的同时删除:last

工作：https://jsfiddle.net/xzt1krqn/

jquery：

$('.add-invoice').on('click', function() {
$("#invoice_div").css("display", "block");
$.ajax({
  url: '/echo/json/',
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  data: {
    json: JSON.stringify(myjson)
  },
  success: function(data) {

    var result = [];
    $.each(data, function(i, e) {
      var matchingItems = $.grep(result, function(item) {
        return item.customer === e.customer && item.cust_id === e.cust_id;
      });

      if (matchingItems.length === 0) {
        result.push(e);
      }
    });

    populateSelectBoxes($('#invoice_div #ddinvoice'), result);

    function populateSelectBoxes($select, result) {
      var invoices = [];
      $.each(result, function() {
        invoices.push('<li data-value="' + this.cust_id + '">' + this.customer + ' : ' + this.invoice + '</li>');
      });
      $select.append(invoices.join(''));
    }

    function populateTableRow(data, selectedProductAutonum) {
      var invoices; //fill with JSON
      $.each(data, function(i, e) {
        if (this.cust_id == selectedProductAutonum) {
          invoices = this;
          custProducts = data.filter(({
            cust_id
          }) => cust_id === selectedProductAutonum);


            $(".item-row:last").after(
              '<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name['+i+']">Item Name</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['+i+']">Description</textarea></td><td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty['+i+']">0</textarea></td><td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');
                if ($(".delete").length > 0) $(".delete").show();
                bind();

                $('#address-title').val(invoices.customer);
                $('#address-one').val(invoices.address);
                $('#invoice_num').val(invoices.invoice);
                $('#paid').val(invoices.paid);
                $('#owed').val(invoices.sales);
                $('#auto_num').val(invoices.autonum);
                $('[name="item_name['+i+']"]').val(invoices.product);
                $('[name="item_desc['+i+']"]').val(invoices.description);
                $('[name="item_cost['+i+']"]').val(invoices.cost);
                $('[name="item_qty['+i+']"]').val(invoices.quantity);
                $('[name="item_price['+i+']"]').val(invoices.price);

        }
      });
      $(this).closest('tr').remove();

    }

    $('#invoice_div #ddinvoice li').click(function(e) {
      var selection = $(this).attr("data-value");
      $(this).parent().parent().parent().hide();
      populateTableRow(data, selection);
      $('ul').empty();
    });

  }
});

//$(this).closest('tr').remove();
update_total();

});

html：

    <table id="items">

      <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="add-product" href="javascript:;" title="Add Product">A</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="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[]">1</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
      </tr>

      <tr id="hiderow">
        <td colspan="5">
        <!--<a id="addrow1" href="javascript:;" title="Add a row">Add a row</a>-->
        <img src="images/rows.png" width="30px" height="auto" id="addrow" href="javascript:;" title="Add a row"/>                  
        <!--<a id="storecust1" href="javascript:;" title="Store Customer">Store Cust.</a>-->
        <img src="images/customers.png" width="30px" height="auto" id="storecust" href="javascript:;" title="Store Customer"/>                
        <!--<a id="storeproduct" href="javascript:;" title="Store Product">Store Product</a>-->
        <img src="images/products.png" width="30px" height="auto" href="javascript:;" id="storeproduct" title="Store Product"/>
       <!-- added to populate invoice from DB -->
        <img src="images/products.png" width="30px" height="auto" href="javascript:;" id="fill-invoice" class="add-invoice" title="Recall Invoice"/>

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

Answer 1

您可以在添加最后一行之前保留对最后一行的引用，然后删除该行，例如，更改：

$(".item-row:last").after("<tr><td></td></tr>");

到

var lastRow = $(".item-row:last");
lastRow.after("<tr><td></td></tr>");
lastRow.remove();

lastRow将在第一行进行评估，因此在添加另一个项目行之后不会更改为“现在的最后一个项目行”。如果您做了$(".item-row:last").remove()，它将删除新添加的行。

如果要添加多行，则将最后一行存储得更早，例如：

var lastRow = $(".item-row:last");
$.each(data, function(i, e) {
    $(".item-row:last").after("<tr><td></td></tr>");
});
lastRow.remove();

这次，在循环内部需要$(".item-row:last")，以便以正确的顺序添加数据-如果您使用lastRow.after，则会以相反的顺序添加数据。

有多种方法可以提高代码的效率（例如，将所有行添加到单个追加中）。

也许更简单的选择是标记模板/占位符/静态行，以便可以识别和删除它，例如：

<tr class="item-row template-row">...

然后：

$.each(data, function(i, e) {
    $(".item-row:last").after("<tr><td></td></tr>");
});
$(".template-row").remove();

在静态行之后添加动态行，然后在一键事件中删除静态行

1 个答案: