使用Javascript更改表格行的背景色

Question

I have created a Body Mass Index (BMI) calculator using javascript where the use inputs their height and weight and the BMI is calculated upon clicking a button. 我使用javascript创建了一个体重指数（BMI）计算器，其中用途输入了它们的身高和体重，并且在单击按钮时计算了BMI。 The result is displayed and a statement is highlighted in grey. 显示结果，并用灰色突出显示一个语句。

Everything is working as expected except when you input again and recalculate to produce a different result, the statement based on the previous result remains highlighted. 一切都按预期工作，除非再次输入并重新计算以产生不同的结果时，基于前一个结果的语句仍然突出显示。 The grey highlight is produced by changing the background colour of a specific row. 通过更改特定行的背景颜色来产生灰色高光。

I want to find out a way of clearing the background colours of the rows in the table between the time when you click "Calculate BMI" and when the new result is displayed and the new statement is highlighted again. 我想找出一种清除表中行的背景色的方法，当您单击“计算BMI”到显示新结果并再次突出显示新语句之间。

I hope that makes sense. 我希望这是有道理的。 If you play around with it to produce different results you'll see what I mean. 如果您尝试使用它来产生不同的结果，您将会明白我的意思。

Here is the HTML and Javascript: 这是HTML和Javascript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BMI Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="CSS/bmi.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function calculate() {
// Input: height
// Inpuut: weight
// Output: BMI

    var height = document.form1.height.value;
    var weight = document.form1.weight.value; 
    var bmiResult = weight/(height/100*height/100); 

    // error invalid character

    if (isNaN(height) == true || isNaN(weight) == true) alert ("must be a number greater than 0");

    // error number < 0

    if (height <=0 || weight <=0) alert ("number must be greater than 0");

    else {

        // build display for result

        var display =" " + bmiResult.toFixed(2);

        document.getElementById("result").innerHTML = display;

        // hightlight result in table

        if (bmiResult <18) { document.getElementById("1").style.backgroundColor='#A0A0A4'}

        else if (bmiResult >=18 && bmiResult <20) { document.getElementById("2").style.backgroundColor='#A0A0A4'}

        else if (bmiResult >=20 && bmiResult <25) { document.getElementById("3").style.backgroundColor='#A0A0A4'}

        else if (bmiResult >=26 && bmiResult <30) { document.getElementById("4").style.backgroundColor='#A0A0A4'}

        else if (bmiResult > 30) { document.getElementById("5").style.backgroundColor='#A0A0A4'};
        }
}
</script>

</head> 
<body>
<div id="box">
<h>Body Mass Index (BMI) Calculator</h>
<br/>
<!-- Input form -->
<div id="input">
<form id="form1" name="form1" action="" method="post">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="50%" height="30"><label for="height" class="form">Height (cm) :</label></td>
<td height="30" align="right"><input name="height" type="text" size="10" maxlength="10" /></td>
</tr>
<tr>
<td height="40"><label for="weight" class="form">Weight (kg) :</label></td>
<td height="40" align="right"><input name="weight" type="text" size="10" maxlength="10" /></td>
</tr>
<tr>
<td height="30" colspan="2" align="center"><input name="Calculate" type="button" value="Calculate BMI" onClick="javascript: calculate()" /></td>
</tr>
</table>
</form>
</div>
<hr/>
<!-- Output -->
<div id="output">
<h1>Your BMI is :<span id="result"></span></h1> <!-- place holder for output -->

<table id="table" width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td id="1" align="left"><p>Under 18 - You are very underweight and possibility malnourished</p></td>
</tr>
<tr>
<td id="2" align="left"><p>Under 20 - You are underweight and could afford to gain a little weight</p></td>
</tr>
<tr>
<td id="3" align="left"><p>20 to 25 - You have a healthy weight range for young and middle-aged adults</p></td>
</tr>
<tr>
<td id="4" align="left"><p>26 to 30 - You are overweight</p></td>
</tr>
<tr>
<td id="5" align="left"><p>Over 30 - You are obese</td>
</tr>
</table>
</div>
</div>
</body>
</html>

BMI Calculator on http://jsbin.com/ http://jsbin.com/上的BMI计算器

Thanks! 谢谢！

David 大卫

Answer 1

The easiest thing to do is just clear all the backgroundColor s before you highlight the new one. 最简单的操作是在突出显示新的backgroundColor之前清除所有backgroundColor 。 So add this at the start of the else {} block: 因此，将其添加到else {}块的开头：

for(var i = 1; i <= 5; i++)
{
    document.getElementById(i.toString()).style.backgroundColor = '';
}

Answer 2

you need to clear the previous highlight and then highlight the right line. 您需要清除之前的突出显示，然后突出显示右行。

after this line: document.getElementById("result").innerHTML = display; 在此行之后：document.getElementById（“ result”）。innerHTML = display;

add this: 添加：

            for (j = 1; j < 6; j++)
              {
                document.getElementById(j).style.backgroundColor="";
              }

it will fix it. 它会修复它。

使用Javascript更改表格行的背景色

问题描述

2 个解决方案

解决方案1
0 2014-10-14 12:32:56

解决方案2
0 2014-10-14 12:42:20

使用Javascript更改表格行的背景色

问题描述

2 个解决方案

解决方案1 0 2014-10-14 12:32:56

解决方案2 0 2014-10-14 12:42:20

解决方案1
0 2014-10-14 12:32:56

解决方案2
0 2014-10-14 12:42:20