1

我坚持这个问题。我想计算身体 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 值。我尝试创建自己的代码，但它没有意义..#bmi$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));
});

有人能给我指路吗？谢谢

4

5 回答 5

2

删除重复的 ID 并使用,class="weight"代替。然后你可以使用下面的 jQuery 代码：class="height"class="bmi"

$(".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/

于 2012-05-27T16:59:09.903 回答
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/

于 2012-05-27T16:59:11.790 回答
1

请尝试添加唯一 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);
});
于 2012-05-27T16:58:44.400 回答
0 
$("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);
});

工作样本

于 2012-05-27T17:10:26.820 回答
-1 
$(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);
    });
});
于 2012-05-27T17:12:21.533 回答