SO Fiddle
HTML
<table id="tabela" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>Seq</th>
<th>Produto</th>
<th>Componente</th>
<th>Qtde </th>
<th>Valor unit </th>
<th class="calcular">Valor Total </th>
<th>Percentual </th>
<th>indice </th>
<th>Observação </th>
<th>Data</th>
<th></th>
</tr>
</thead>
<tbody id="tabelaItem" style="border-spacing: 8px; border-collapse: separate">
</tbody>
</table>
CSS
.total {
}
JavaScript
$(function () {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
// $this = this;
$(this).find('input[type=text]').bind("keyup", function () {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
var sum = 0;
$(this).find('input[type=text]').not('.total').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
});
}
});