计算表格行答案

【问题标题】：Calculating Table Rows计算表格行
【发布时间】：2014-12-25 18:56:33
【问题描述】：

所以我有一个可以添加新行的表。如果我手动输入数量和价格，则使用此 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 生成的初始行被正确计算。但是，一旦我添加了一个新行并尝试自动填充并计算总数，第一行就会随着我刚刚添加的新行发生变化。

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

【问题讨论】：

像$(".id") 这样的选择器会在页面中找到所有相同的类。您需要定义一种针对特定行的方法。可以通过在行上切换一个类，或者总是填充最后一行。你在寻找什么行为？
切换听起来更简单也更合乎逻辑，因为我们可能会返回一行来同时更改数量或项目。

标签： javascript jquery html codeigniter twitter-bootstrap

【解决方案1】：

我不太明白你的问题。

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

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

【讨论】：

不完全。当我输入项目的美元金额和数量时，当我模糊数量字段时，Javascript 会自动将这两者相乘以找到总计，然后用总计填充该行的总计字段。当我使用jquery autosuggest 自动填充时，我需要它来做同样的事情。现在它会更改表中的每一行以匹配我刚刚创建的行。
在 autocomplette 上选择方法调用我的函数 total() 但在返回之前放入每一行的总数。

【解决方案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');
});

【讨论】：