如何突出显示与结果匹配的表行

单击计算按钮时,我想通过突出显示表格行显示结果。如果计算所有输入,则仅突出显示bmi本身的表行。

例如,如果bmi为17.51,则它仅突出显示表中的第三行(“轻度细化”,17-18.5)。

以下是我的摘录。

window.addEventListener("load", () => {
    document.getElementById("calculate").addEventListener("click", toBmi);
});
var toBmi = () => {
    var weight = document.getElementById("weight").value;
    var height = document.getElementById("height").value;
    var bmi;
    if(weight > 0 && height > 0) {
        bmi = weight / Math.pow((height/100), 2);
    }
    document.getElementById("bmi").innerHTML = bmi == undefined ? " " : "BMI = " + bmi.toFixed(2);
}
var clearForm = () => {
    document.getElementById("doForm").reset();
    document.getElementById("bmi").innerHTML = " ";
}
table {border-collapse: collapse;}
th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgb(0, 0, 0);
}
<form id="doForm">
    <div class="rowTab-1">
        <div class="label-left">
            <label id="weight-label" for="weight">Weight:</label>
            <input type="text" name="weight" class="form-input" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">
            <label id="unit-label" for="weightUnit">Kg</label>
        </div>
    </div>
    <div class="rowTab-2">
        <div class="label-left">
            <label id="height-label" for="height">Height:</label>
            <input type="text" name="height" class="form-input" id="height" size="10" maxlength="4" onkeypress="if(this.value.length > 3) return false;">
            <label id="unit-label" for="heightUnit">Cm</label>
        </div>
    </div>
    <div class="buttons">
        <button type="button" id="calculate">calculate</button>
        <button type="button" id="clear" onclick="clearForm()">clear</button><br>
    </div>
    <div class="showResult">
        <span id="bmi"></span><br>
    </div>
</form>
<table id="resultBmiTable">
    <thead>
        <tr>
            <th>Category</th>
            <th>BMI range</th>
        </tr>
    </thead>
    <tbody>
        <tr id="bmi-1">
            <td>Severe Thinness</td>
            <td>&lt;	&nbsp;16</td>
        </tr>
        <tr id="bmi-2">
            <td>Moderate Thinness</td>
            <td>16 - 17</td>
        </tr>
        <tr id="bmi-3">
            <td>Mild Thinness</td>
            <td>17 - 18.5</td>
        </tr>
        <tr id="bmi-4">
            <td>Normal</td>
            <td>18.5 - 25</td>
        </tr>
        <tr id="bmi-5">
            <td>Overweight</td>
            <td>25 - 30</td>
        </tr>
        <tr id="bmi-6">
            <td>Obese Class I</td>
            <td>30 - 35</td>
        </tr>
        <tr id="bmi-7">
            <td>Obese Class II</td>
            <td>35 - 40</td>
        </tr>
        <tr id="bmi-8">
            <td>Obese Class III</td>
            <td>&gt;	&nbsp;40</td>
        </tr>
    </tbody>
</table>

我该如何实施?我不知道如何完成我的代码。

谢谢。

评论