计算表行

Question

所以我有一个表，我可以添加一个新行。如果我手动输入数量和价格，则总计是使用此JavaScript代码计算的。

function addRow() { 
    addTableRow($('.table tbody')); 
} 

function removeRow() { 
    var par = $(this).parent().parent(); 
    var tableSize = $('.table tbody tr').length; 
    if(tableSize == '1'){ 
     alert('You must have one row'); 
     return false; 
    } 
    par.remove(); 
}; 

function calculateRow() { 
    var par = $(this).parent().parent(); 
    var price = $(par).find('.price').val(); 
    var qty = $(par).find('.qty').val(); 
    var total = price*qty; 
    $(par).find('.total').val(total.toFixed('2')); 
} 

$('.table tbody').on("click", ".removeRow", removeRow); 
$('.table tbody').on("blur", ".qty", calculateRow); 

function addTableRow(table) { 
    $(table).append(
     "<tr>" + 
     "<td><input name='item_number[]' type='text' class='id form-control'></td>" + 
     "<td><input name='item_name[]' type='text' class='name search form-control'></td>" + 
     "<td><input name='item_price[]' type='text' class='price form-control price'></td>" + 
     "<td><input name='item_qty[]' type='text' class='form-control qty'></td>" + 
     "<td><input name='item_total[]' type='text' class='form-control total'></td>" + 
     "<td class='text-center' style='vertical-align:middle;'><a href='#' class='text-success removeRow'><i class='fa fa-trash-o'></i></a></td>" + 
     "</tr>"); 
    auto(); 
} 

现在我已经加入jQuery用户界面的AutoSuggest我的桌前，并使其所以我能够全部通过选择一个产品填补了项目编号，项目名称，项目数量和项目价格。使用JavaScript如下：

function auto() { 
    var ac_config = { 
     source: "/admin/items/fetch_items", 
     select: function(event, ui){ 
      var item = ui.item; 
      if(item) { 
       $(".id").val(item.id); 
       $(".price").val(item.price); 
       $(".qty").val('1'); 
       var par = $(".qty").parent().parent(); 
       var price = $(par).find('.price').val(); 
       var qty = $(par).find('.qty').val(); 
       var total = price*qty; 
       $(par).find('.total').val(total.toFixed('2')); 
      } 
     }, 
     minLength: 1, 
    }; 
    $(".search").autocomplete(ac_config); 
} 

现在你可以看到，我需要计算行总计并填写。当代码位于上面时，默认由html创建的第一行被正确计算。但是，一旦我添加一个新行并尝试自动填充并计算总数，第一行将随着我刚添加的新行一起更改。

我该如何获得javascript在我刚刚使用jQuery UI自动填充的行上运行？

Answer 1

的值使用上活动行像selected一类，并添加基于该类一些高亮的CSS。

function addRow() { 
    var $table = $('.table tbody');  
    addTableRow($table); 
    $table.find('tr.selected').removeClass('selected').end().find('tr:last').addClass('selected'); 
} 

现在自动完成回调中，你可以用你选择的地方瞄准selected行

var ac_config = { 
    source: "/admin/items/fetch_items", 
    select: function(event, ui){ 
     var item = ui.item; 
     if(item) { 
      var $row = $('tr.selected'); 
      $row.find(".id").val(item.id); 
      $row.find(".price").val(item.price); 

      /* ....... etc....*/ 
     } 
    }, 
    minLength: 1, 
}; 

然后在你的初始化代码添加一个单击处理程序上的行单击切换selected：

$('.table tbody').on('click', 'tr',function(){ 
    $(this).siblings().removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

Answer 2

我不完全理解你的问题。

但是这对你有用吗？ 使用jQuery您可以将每个TR的和acumulate每一行

function total() { 
    var total=0; 
    $.each("table tr", function(key,row) { 
     var tr=$(this); 
     var qty=parseFloat(tr.find(".qty).val()); 
     var price=parseFloat(tr.find(".price).val()); 
     total+=qty*price; 
    }); 
    return total; 
} 

$(".qty, .price").change(function(){ 
    var total=total(); 
    $(".total").html(total); 
});