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等等。在计算出自己的$weight/（$height*100/$height*100）

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

Here is a fiddle of a full working example:
http://jsfiddle.net/uCAYF/1/

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

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

Here are some good resources on the different selectors you can use and how they work:
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);
});

工作示例

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);
    });
});

友情链接