Question

if(bmi < 18.5 )
{
    element1.backgroundColor =  colour;
    $(document).ready(function(){
      $(".C_underArrow").show();
       });
}

else if (bmi>= 18.5 && bmi<= 24.9)
{
  element2.backgroundColor =  colour;
   $(document).ready(function(){    
     $(".C_normalArrow").show();
    });
}

Am trying to color a table rows.

Depending on an input ” bmi ” .. decide which condition will use for example first condition , then coloring the element1 .

When i change the input value .. and get in the another condition and coloring element2 .. it keeps the element1 colored.

i want to color one row at every new input value

how can i solve it ?

Edit: Adding HTML code

<table class="C_resultTable">


<tr id="id1">
<td >
<img id="ID_underArrow" class="C_underArrow" width="30" height="30" src="right-arrow.gif" />
</tr>
</td>


<tr id="id2">
<td >
<img id="ID_normalArrow" class="C_normalArrow" width="30" height="30" src="right-arrow.gif" />
</tr>
</td>


<tr id="id3">
<td >
<img id="ID_overArrow" class="C_overArrow" width="30" height="30" src="right-arrow.gif" />
</tr>
</td>


<tr id="id4">
<td >
<img id="ID_ObeseArrow" class="C_ObeseArrow" width="30" height="30" src="right-arrow.gif" />
</td>
</td>       

</table>

Answer 1

You could store on a global var which is the currently coloured row. (var colouredElement on my code snippet)

Without jQuery

if (colouredElement != null)
    colouredElement.backgroundColor = '';

if(bmi < 18.5 )
{
    colouredElement = element1;
    element1.backgroundColor =  colour;
    $(document).ready(function(){
      $(".C_underArrow").show();
    });
}    
else if (bmi>= 18.5 && bmi<= 24.9)
{
     colouredElement = element2;
     element2.backgroundColor =  colour;
     $(document).ready(function(){  
      $(".C_normalArrow").show();
    });
}

With jQuery

if ($colouredElement != null)
    $colouredElement.css({ backgroundColor: ''});

if(bmi < 18.5 )
{
    $colouredElement = $('table.C_resultTable tr:nth-child(1)');
    $colouredElement.css({backgroundColor: colour});
    $(document).ready(function(){
      $(".C_underArrow").show();
    });
}    
else if (bmi>= 18.5 && bmi<= 24.9)
{
    $colouredElement = $('table.C_resultTable tr:nth-child(2)');
    $colouredElement.css({backgroundColor: ''});
     $(document).ready(function(){  
      $(".C_normalArrow").show();
    });
}