Change bg colour on rows based on cell value

Change bg colour on rows based on cell value

I have a column containing "Section1", "Section2" and "Section3". 

I want to find the right column (first one), and the cell that contains "Section1" and for that row I want to set a blue background. Also I want to do this for all the rows beneath until "Section2" is found. Then the row for "Section2" will have another colour, as well as the rows beneath until "Section3" is found and so on...

This is the result I would prefer:


How could I achieve that?

  • <table class="fooBar" width="200" border="0">
    2.   <tr style="background-color:#ccc">
    3.     <td><b>ColHeader1</b></td>
    4.     <td><b>ColHeader2</b></td>
    5.     <td><b>ColHeader3</b></td>
    6.   </tr>
    7.   <tr class="section1">
    8.     <td><b>Section1</b></td>
    9.     <td>&nbsp;</td>
    10.     <td>&nbsp;</td>
    11.   </tr>
    12.   <tr class="section1">
    13.     <td>CellData</td>
    14.     <td>CellData</td>
    15.     <td>CellData</td>
    16.   </tr>
    17.   <tr class="section1">
    18.     <td>CellData</td>
    19.     <td>CellData</td>
    20.     <td>CellData</td>
    21.   </tr>
    22.   <tr class="section2">
    23.     <td><b>Section2</b></td>
    24.     <td>&nbsp;</td>
    25.     <td>&nbsp;</td>
    26.   </tr>
    27.   <tr class="section2">
    28.     <td>CellData</td>
    29.     <td>CellData</td>
    30.     <td>CellData</td>
    31.   </tr>
    32.   <tr class="section2">
    33.     <td>CellData</td>
    34.     <td>CellData</td>
    35.     <td>CellData</td>
    36.   </tr>
    37.   <tr class="section3">
    38.     <td><b>Section3</b></td>
    39.     <td>&nbsp;</td>
    40.     <td>&nbsp;</td>
    41.   </tr>
    42.   <tr class="section3">
    43.     <td>CellData</td>
    44.     <td>CellData</td>
    45.     <td>CellData</td>
    46.   </tr>
    47.   <tr class="section3">
    48.     <td>CellData</td>
    49.     <td>CellData</td>
    50.     <td>CellData</td>
    51.   </tr>
    52. </table>