Использования JQuery для суммирования столбца значения в таблице после фильтрации

Question

У меня есть таблица, как это в моей странице:

<table class="table table-bordered table-striped"> 
    <caption> 
     <h3>Itens do Estrutural</h3> 
     <div class="input-group input-group-lg col-md-9"> 
      <span class="input-group-addon">Filtrar:</span> 
      <input type="text" name="filterbox" id="filterbox" class="form-control" placeholder="Type your search here ..." /> 
     </div><br /> 
    </caption> 
    <thead> 
     <tr> 
      <th>Company</th> 
      <th>Description</th> 
      <th>Value</th> 
     </tr> 
     <tr class="info"> 
      <td colspan="2" class="text-right">TOTAL:</td> 
      <td class="total text-right"></td> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td class="text-center">@Html.DisplayFor(modelItem => item.Company)</td> 
       <td>@Html.DisplayFor(modelItem => item.Description)</td> 
       <td class="valor text-right">@Html.DisplayFor(modelItem => item.Value)</td> 
      </tr> 
     } 
    </tbody> 
    <tfoot> 
     <tr class="info"> 
      <td colspan="2" class="text-right">TOTAL:</td> 
      <td class="total text-right"></td> 
     </tr> 
    </tfoot> 
</table> 

Когда документ готов, он вычислил общий для столбца с классом доблестью и это показано как на голове, так и под столом таблицы в колонке с классом всего.

Идея состоит в том, что пользователь может фильтровать строки, набирая что-либо на входном тексте с именем filterbox, и поэтому итоговое значение должно быть пересчитано.

К этому времени я нахожусь в состоянии отфильтровать строки с кодом JQuery ниже:

$(document).ready(function() { 

    var $rows = $(".table tbody tr"); 
    var total = 0; 

    $rows.each(function() { 
     total += parseFloat($(this).find(".valor").text().replace(/\./g, "").replace(",", ".")); 
    }); 

    $("#filterbox").keyup(function() { 
     var filtertext = $(this).val(); 
     var regex = new RegExp(filtertext, 'i'); 
     $rows.hide().filter(function() { 
      return regex.test($(this).text()); 
     }).show(); 
    }); 

    $(".total").html(formataTotal(total.toFixed(2))); 
}); 

function formatTotal(num) { 
    var parts = num.toString().split("."); 
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "."); 
    return parts.join(","); 
} 

Я попытался следующие действия, чтобы получить общее пересчитывается, но это не сработало:

 $("#filterbox").keyup(function() { 
     var filtertext = $(this).val(); 
     var regex = new RegExp(filtertext, 'i'); 
     $rows.hide().filter(function() { 
      return regex.test($(this).text()); 
     }).each(function() { 
      total += parseFloat($(".table tbody tr").find(".valor").text().replace(/\./g, "").replace(",", ".")); 
     }).show(); 
    }); 

Что делать, чтобы суммировать значения, пересчитанные при фильтрации строк?

Спасибо за внимание. Paulo Ricardo Ferreira

Answer 1

Попробуйте это:

$(document).ready(function() { 

    var $rows = $(".table tbody tr"); 
    var total = 0; 

$rows.each(function() { 
    total += parseFloat($(this).find(".valor").text().replace(/\./g, "").replace(",", ".")); 
}); 

$("#filterbox").keyup(function() { 
    var filtertext = $(this).val(); 
    var regex = new RegExp(filtertext, 'i'); 
    $rows.hide().filter(function() { 
     return regex.test($(this).text()); 
    }).show(); 

    $(".table tbody tr:visible").each(function() { 
     total += parseFloat($(this).find(".valor").text().replace(/\./g, "").replace(",", ".")); 
    }); 
    $(".total").html(formataTotal(total.toFixed(2))); 

}); 

$(".total").html(formataTotal(total.toFixed(2))); 
}); 

function formatTotal(num) { 
var parts = num.toString().split("."); 
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "."); 
return parts.join(","); 
}