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

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

这是我看到的台阶。

1. 给脚本一些要处理的数据点:包括每行的数据属性，例如<tr id="bmi-2" data-range-min="16" data-range-max="17"> (在这里阅读有关数据属性的更多信息。)
2. 获取具有数据属性的所有行(document.querySelectorAll('[data-range-min]');)
3. 迭代它们，找出你的价值属于哪一个。
4. 向匹配类添加一个CSS类(elem.classList.add("highlight");)

P.S.：如果bmi是多次计算的，那么首先要清除所有行中的highlight类--在第2步之后，最好是这样做。在这里阅读更多关于classList的信息。

Answer 2

这样做的一种方法是拥有一个bmi值数组，该数组映射到表中的每一行，然后遍历该数组，直到找到大于实际bmi的最小值，并向其中添加一个突出显示类：

​

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