I have code like this.
<input type="text" name="1" class = "inp<?=$p?> ">
<input type="text" name="2" class = "inp<?=$p?> ">
<input type="text" name="3" class = "inp<?=$p?> ">
<input type="text" name="4" class = "sum<?=$p?> ">
Here the jquery code
$('.inp0').keyup(function(){
var sum = 0;
var ave = 0;
$('.inp0').each(function(){
sum += +$(this).val();
});
ave = sum/3;
$('.sum0').val(ave.toFixed(2));
});
and it work properly but just for 1 row of input form.
if i do loop to my jquery code like
for(x=0;x<5;x++)
{*jquery code here*}
and change jquery selector to $('.inp'+x)
, only 5th row that can work but not for row 1 to 4. can someone help me ? thanks before
Try something like this:
$('[class^="inp"]').keyup(function(){
var sum = 0;
var ave = 0;
var index = $(this).attr('class').split('p')[1];
$('.inp'+index).each(function(){
sum += $(this).val();
});
ave = sum/3;
$('.sum'+index).val(ave.toFixed(2));
});
You have just 1 input classed 'inp0'. Use a common class for all inputs and in the selector.
You can group the elemnets by attributes and use that to select the elements like
$('.inp').keyup(function() { var sum = 0; var ave = 0; var grp = $(this).data('grp'); $('.inp[data-grp="' + grp + '"]').each(function() { sum += +$(this).val() || 0; }); ave = sum / 3; $('.sum[data-grp="' + grp + '"]').val(ave.toFixed(2)); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="1" data-grp="0" class="inp"> <input type="text" name="2" data-grp="0" class="inp"> <input type="text" name="3" data-grp="0" class="inp"> <input type="text" name="4" data-grp="0" class="sum"> <br /> <input type="text" name="1" data-grp="1" class="inp"> <input type="text" name="2" data-grp="1" class="inp"> <input type="text" name="3" data-grp="1" class="inp"> <input type="text" name="4" data-grp="1" class="sum"> <br /> <input type="text" name="1" data-grp="2" class="inp"> <input type="text" name="2" data-grp="2" class="inp"> <input type="text" name="3" data-grp="2" class="inp"> <input type="text" name="4" data-grp="2" class="sum"> <br />
Another way
$('.inp').keyup(function() { var sum = 0; var ave = 0; var $tr = $(this).closest('tr'); $tr.find('.inp').each(function() { sum += +$(this).val() || 0; }); ave = sum / 3; $tr.find('.sum').val(ave.toFixed(2)); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="text" name="1" class="inp"> </td> <td> <input type="text" name="2" class="inp"> </td> <td> <input type="text" name="3" class="inp"> </td> <td> <input type="text" name="4" class="sum"> </td> </tr> <tr> <td> <input type="text" name="1" class="inp"> </td> <td> <input type="text" name="2" class="inp"> </td> <td> <input type="text" name="3" class="inp"> </td> <td> <input type="text" name="4" class="sum"> </td> </tr> <tr> <td> <input type="text" name="1" class="inp"> </td> <td> <input type="text" name="2" class="inp"> </td> <td> <input type="text" name="3" class="inp"> </td> <td> <input type="text" name="4" class="sum"> </td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.