Question

我坚持这个问题。我想计算身体BMI。

我的HTML - 每行<tr>都是由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>

我尝试实现的目标是每个人Jack，Michael，so on..在计算出自己的#bmi后，会在$weight/($height*100/$height*100)文本字段中拥有自己的BMI值值。我尝试创建自己的代码，但它没有意义..

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

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

有人能给我指路吗？感谢

Answer 1

删除重复的ID，然后使用class="weight"，class="height"和class="bmi"。然后，您可以使用以下jQuery代码：

$(".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);
});

如果要允许浮点数作为输入值，请将包含parseInt的两行替换为：

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

演示：http://jsfiddle.net/KStjd/

Answer 2

问题很可能是val返回字符串而字符串不能成倍增加或分割。正如ThiefMaster所述，您也不能拥有多个具有相同ID的项目，因此请将<tr id="person_bmi">更改为<tr class="person_bmi">

$(".person_bmi input").keyup(function() {
   var $parent = $(this).parent().parent();

   var weight = parseFloat($parent.find("[name='weight']").val());
   var height = parseFloat($parent.find("[name='height']").val());
   var bmi = weight/(height/100*height/100);

   $parent.find("[name='bmi']").val(bmi);
});

这是一个完整工作示例的小提琴： http://jsfiddle.net/uCAYF/1/

您看到使用的.find函数是“范围”的，因为它只会找到从调用它的元素后面的节点。由于它是作用域的，它将安全地选择给定行上感兴趣的输入字段。

jQuery允许您在搜索元素时使用CSS选择器，因此您可以做的不仅仅是通过id查找内容。例如，在上面的示例中，我按名称找到您的输入元素。

以下是您可以使用的不同选择器以及它们如何工作的一些好资源： http://www.w3.org/TR/CSS2/selector.html

http://www.w3.org/TR/selectors/

Answer 3

请尝试添加唯一ID：

var weight= parseFloat($("#person1_weight").val());
var height= parseFloat($("#person1_height").val());
var bmi = weight/(height/100*height/100);

$("#person1_bmi").val(bmi); // bmi is not an integer

或者以下内容可能会起作用而不管无效的非唯一ID，因此您可以保留它们（不推荐）或取消所有ID。它使用输入位置。

$("tr input:eq(0), tr input:eq(1)").keyup(function(){
    var weight= parseFloat($(this).closest('tr').find('input:eq(0)'));
    var height= parseFloat($(this).closest('tr').find('input:eq(1)'));
    var bmi = weight/(height/100*$height/100);

    $(this).closest('tr').find('input:eq(2)').val(bmi);
});

Answer 4

$("input[name=weight], input[name=height").keyup(function() {
    var row = $(this).parent().parent(),
        weight = parseFloat($('input[name=weight]', row).val()),
        height = parseFloat($('input[name=height]', row).val());
    var bmi = weight / (height / 100 * height / 100);
    $('.bmi', row).val(isNaN(bmi) ? '' : bmi);
});

<强> Working Sample

Answer 5

$(document).ready(function()
{
    $("PutYourButtonID_Here").click(function(event){
        var weight= parseFloat($("#person1_weight").val());
        var height= parseFloat($("#person1_height").val());
        var bmi = weight/(height/100*height/100);
        $("#person1_bmi").val(bmi);
    });
});

jquery计算BMI

5 个答案: