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 UI 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默认生成的初始行。但是，一旦我添加了一个新行并尝试自动填充它并计算总数，第一行就会随着我刚刚添加的新行而改变。

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

Answer 1

我不完全理解你的问题。

但这对你有用吗？使用jquery，你可以每个trth并累积每行的值

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

Answer 2

在活动行上使用类似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');
});

计算表行

2 个答案: