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

Question

我使用javascript創建了一個體重指數（BMI）計算器，其中用途輸入了它們的身高和體重，並且在單擊按鈕時計算了BMI。 顯示結果，並用灰色突出顯示一個語句。

一切都按預期工作，除非再次輸入並重新計算以產生不同的結果時，基於前一個結果的語句仍然突出顯示。 通過更改特定行的背景顏色來產生灰色高光。

我想找出一種清除表中行的背景色的方法，當您單擊“計算BMI”到顯示新結果並再次突出顯示新語句之間。

我希望這是有道理的。 如果您嘗試使用它來產生不同的結果，您將會明白我的意思。

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

http://jsbin.com/上的BMI計算器

謝謝！

大衛

Answer 1

最簡單的操作是在突出顯示新的backgroundColor之前清除所有backgroundColor 。 因此，將其添加到else {}塊的開頭：

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

Answer 2

您需要清除之前的突出顯示，然后突出顯示右行。

在此行之后：document.getElementById（“ result”）。innerHTML = display;

添加：

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

它會修復它。

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