javascript - 如何突出显示与结果匹配的表行
问题描述
当我单击计算按钮时,我想通过突出显示表格行来显示结果。如果它计算所有输入,它只突出显示 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>< 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>> 40</td>
</tr>
</tbody>
</table>
我该如何实施?我不知道如何完成我的代码工作。
谢谢。
解决方案
一种方法是创建一个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>< 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>> 40</td>
</tr>
</tbody>
</table>
推荐阅读
- c++ - 如何使用 Visual Studio 2010 安装 Opencv 3.4.1 + contrib 3.4.1
- java - 如何修复struts漏洞
- php - 从另一个关联数组php的唯一值创建关联数组
- batch-file - 如何绕过将文件从多个位置移动到一个文件夹的限制
- c# - 从文件夹中替换/删除图像。C#
- c - _Bool 类型和严格别名
- node.js - 在nodejs中将缓冲流转换为pgm
- excel - 用于数据透视表参考的 Excel Vlookup 公式
- c++ - 调用可变参数函数模板时的 C++11 模棱两可的重载
- java - 我调用了一个 java 函数,我有 Stacktrace:] 根本原因在 JSP