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

Question

当我单击计算按钮时，我想通过突出显示表格行来显示结果。 如果它计算所有输入，它只突出显示 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>

我该如何实施？ 我不知道如何完成我的代码工作。

谢谢。

Answer 1

做到这一点的一种方法是有一个bmi值数组，其中 map 到表中的每一行，然后遍历这个数组，直到找到大于实际 bmi 的最小值并添加一个突出显示 class 到它：

 const bmiclass = [0, 16, 17, 18.5, 25, 30, 35, 40, 999] 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); // remove any existing highlighting document.querySelectorAll('[id^="bmi-"]').forEach(e => e.classList.remove('highlight')); // highlight the selected range for (let i = 0; i < bmiclass.length; i++) { if (bmi <= bmiclass[i]) { document.getElementById('bmi-' + i).classList.add('highlight'); break; } } } 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); }.highlight { background-color: cyan; }

 <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>

Answer 2

这是我看到的步骤。

1. 给你的脚本一些数据点来处理：在每一行包含数据属性，例如<tr id="bmi-2" data-range-min="16" data-range-max="17"> （ 阅读更多关于数据属性在这里）
2. 获取所有具有数据属性的行（ document.querySelectorAll('[data-range-min]'); ）
3. 遍历它们并找出您的价值属于哪一个
4. 将 CSS class 添加到匹配的那个（ elem.classList.add("highlight"); ）

PS：如果bmi被计算多次，你想首先从所有行中清除highlight class - 在第 2 步之后将是执行此操作的好时机。 在此处阅读有关 classList 的更多信息。

Answer 3

遍历范围列表并突出显示与该范围对应的行：

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);
        console.log("bmi=" + bmi);

        [
            [0, 16],
            [16, 17],
            [18, 18.5],
            [18.5, 25],
            [25, 30],
            [30, 35],
            [35, 40],
            [40, 999],
        ].forEach(function (range, i) {
            console.log('got ' + i);
            var elmt = document.getElementById('bmi-' + (i + 1))
            if (bmi >= range[0] && bmi < range[1]) {
                console.log("Highlighting " + i);

                if (elmt) {
                    elmt.style.backgroundColor = 'red';
                }
            } else {
                if (elmt) {
                    elmt.style.backgroundColor = 'white';
                }
            }
        });
        document.getElementById("bmi").innerHTML = bmi == undefined ? " " : "BMI = " + bmi.toFixed(2);
    }
}

Answer 4

Taking reference from @montrealist answer's

    table {
            border-collapse: collapse;
        }

        th,
        td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgb(0, 0, 0);
        }

        .highlight {
            background-color: cyan;
        }

    <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" data-range-min="0" data-range-max="16">
                <td>Severe Thinness</td>
                <td>&lt; &nbsp;16</td>
            </tr>
            <tr id="bmi-2" data-range-min="16" data-range-max="17">
                <td>Moderate Thinness</td>
                <td>16 - 17</td>
            </tr>
            <tr id="bmi-3" data-range-min="17" data-range-max="18.5">
                <td>Mild Thinness</td>
                <td>17 - 18.5</td>
            </tr>
            <tr id="bmi-4" data-range-min="18.5" data-range-max="25">
                <td>Normal</td>
                <td>18.5 - 25</td>
            </tr>
            <tr id="bmi-5" data-range-min="25" data-range-max="30">
                <td>Overweight</td>
                <td>25 - 30</td>
            </tr>
            <tr id="bmi-6" data-range-min="30" data-range-max="35">
                <td>Obese Class I</td>
                <td>30 - 35</td>
            </tr>
            <tr id="bmi-7" data-range-min="35" data-range-max="40">
                <td>Obese Class II</td>
                <td>35 - 40</td>
            </tr>
            <tr id="bmi-8" data-range-min="40" data-range-max="100">
                <td>Obese Class III</td>
                <td>&gt; &nbsp;40</td>
            </tr>
        </tbody>
    </table>

    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);
            // code for highlight the background    
            document.querySelectorAll('[data-range-min]').forEach(v => {
                let isHighlight = (bmi >= +v.dataset.rangeMin && bmi < +v.dataset.rangeMax)
                v.classList.toggle("highlight", isHighlight);
            })

        }
        var clearForm = () => {
            document.getElementById("doForm").reset();
            document.getElementById("bmi").innerHTML = " ";
        }