How do I use jquery to total fields in rows for a variable number of rows -
i trying add option fields on row total field on row, using jquery. can't use ids because there variable number of rows, created clone user needs them.
<tr> <td><input name="option_1[]" type="text" class="integer add_to_total" /></td> <td><input name="option_2[]" type="text" class="numeric add_to_total"/> </td> <td><input name="option_3[]" type="text" class="numeric add_to_total"/> </td> <td><input name="total[]" type="text" class="numeric is_total" /> </td> </tr>
i thought of attaching change event input fields 'add_to_total' class , using sibling function add 'is_total' class. can't syntax right:
$(".add_to_total").change(function() { var line_total = 0; line_total += $(this + " .add_to_total").siblings().val(); $(this + " .is_total").siblings().val(line_total); }); syntax errors , doesn't work.
$('.add_to_total').change(function(){ var total = 0; var row = $(this).closest('tr'); row.find('.add_to_total').each(function(){ total += this.value.replace(/[^\d\.-]/,'')*1; }); row.find('.is_total').val( total ); });
the replace()
allows user enter 1,000
, not have end nan
total.
if speed big concern, might suggest caching row.find('.add_to_total')
jquery data on row, that's optimization best left until you're sure need it.
Comments
Post a Comment