Las modificaciones que necesitas hacer son las siguientes:
[Opcional] Para dar una mejor experiencia al usuario, te recomiendo utiliza el evento
input
en lugar defousout
.Debes usar
parseInt
para obtener el valor como un entero (oparseFloat
para obtener el valor como un decimal)Los elementos que debes buscar e iterar, son las filas de la tabla (
eg: $("#tabla tbody tr").each
)Por cada fila (
eg: $tr = $(this)
) debes buscar las celdas con las clases.numero
y.total
(eg: $tr.find('.numero')
)
Ejemplo:
$(function() {
$('#factor').on('input', function() {
var factor = parseInt($("#factor").val(), 10) || 0;
$("#tabla tbody tr").each(function() {
var $tr = $(this);
var numero = parseInt($tr.find('.numero').text(), 10);
var r = factor + numero;
$tr.find('.total').text(r);
})
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tabla" border="1">
<thead>
<tr>
<td>Numero</td>
<td>total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="numero">1</td>
<td class="total"></td>
</tr>
<tr>
<td class="numero">2</td>
<td class="total"></td>
</tr>
</tbody>
</table>
Sumar: <input id="factor" type="number" value="0"/>