I need to display the total ( .total
) of each row ( .numero
).
Obviously my problem is loop
that I'm doing it wrong.
Right now I have the following code:
<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>
$(document).ready(function()
{
$(document).on('focusout','#factor',function()
{
$("#tabla").each(function()
{
var factor = $("#factor").val();
var numero = $("#tabla tbody tr").siblings().text();
var r = parseInt(factor) + parseInt(numero);
$(".total").text(r);
console.log(r);
})
})
});
The modifications you need to make are the following:
[ Optional ] To give a better user experience, I recommend you use the event
input
instead offousout
.You must use
parseInt
to get the value as an integer ( orparseFloat
to get the value as a decimal )The elements that you must look for and iterate, are the rows of the table (
eg: $("#tabla tbody tr").each
)For each row (
eg: $tr = $(this)
) you must find the cells with the classes.numero
and.total
(eg: $tr.find('.numero')
)Example: