Question

I stuck to this problem. I want to calculate body BMI.

My HTML – every row <tr> is created dynamically by PHP.

     <tbody>        
     <tr id="person_bmi">
        <td>Jack</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

    <tr id="person_bmi">
        <td>Michael</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

      //and so on...
</tbody>

What I try to achieve is every person Jack, Michael, so on.. will have their own BMI values in #bmi textfield after calculated their own $weight/($height*100/$height*100) value. I try to create my own code but its not make sense..

$("#weight, #height").keyup(function(){
    var $weight= $("#weight").val();
    var $height= $("#height").val();
    var $bmi = $weight/($height/100*$height/100);

    $("#bmi").val(parseInt($bmi));
});

Can someone show me the way? Thanks

Answer 1

Remove the duplicate IDs and use class="weight", class="height" and class="bmi" instead. Then you can use the following jQuery code:

$(".weight, .height").keyup(function() {
    var row = $(this).closest('tr');
    var weight = parseInt(row.find('.weight').val(), 10);
    var height = parseInt(row.find('.height').val(), 10);
    var bmi = weight / (height / 100 * height / 100);
    row.find('.bmi').val(isNaN(bmi) ? '' : bmi);
});

If you want to allow floats for the input values, replace the two lines containing parseInt with these:

var weight = parseFloat(row.find('.weight').val());
var height = parseFloat(row.find('.height').val());

Demo: http://jsfiddle.net/KStjd/