Hello I hope you can help me I have a code and would like to change the background colour of each cell from white, to grey, to red to blue and back again, by clicking on it. This is the code any help would be appreciated thank in advance.
<table id="table_1" cellspacing="0" cellpadding="0" style="background-color:#ffffff; border-collapse: collapse; position:absolute; left:100px; top:439px; width:211px; height:136px; " >
<tr id="table_1_R01">
<td id="table_1_R01C01" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Su</span></p>
</td>
<td id="table_1_R01C02" style="width:15%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Mo</span></p>
</td>
<td id="table_1_R01C03" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Tu</span></p>
</td>
<td id="table_1_R01C04" style="width:16%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">We</span></p>
</td>
<td id="table_1_R01C05" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Th</span></p>
</td>
<td id="table_1_R01C06" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Fr</span></p>
</td>
<td id="table_1_R01C07" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Sa</span></p>
</td>
</tr>
<tr id="table_1_R02">
<td id="table_1_R02C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0"> </span></p>
</td>
<td id="table_1_R02C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0"> </span></p>
</td>
<td id="table_1_R02C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0"> </span></p>
</td>
<td id="table_1_R02C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0"> </span></p>
</td>
<td id="table_1_R02C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">1</span></p>
</td>
<td id="table_1_R02C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">2</span></p>
</td>
<td id="table_1_R02C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">3</span></p>
</td>
</tr>
<tr id="table_1_R03">
<td id="table_1_R03C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">4</span></p>
</td>
<td id="table_1_R03C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">5</span></p>
</td>
<td id="table_1_R03C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">6</span></p>
</td>
<td id="table_1_R03C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">7</span></p>
</td>
<td id="table_1_R03C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">8</span></p>
</td>
<td id="table_1_R03C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">9</span></p>
</td>
<td id="table_1_R03C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">10</span></p>
</td>
</tr>
<tr id="table_1_R04">
<td id="table_1_R04C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">11</span></p>
</td>
<td id="table_1_R04C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">12</span></p>
</td>
<td id="table_1_R04C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">13</span></p>
</td>
<td id="table_1_R04C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">14</span></p>
</td>
<td id="table_1_R04C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">15</span></p>
</td>
<td id="table_1_R04C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">16</span></p>
</td>
<td id="table_1_R04C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">17</span></p>
</td>
</tr>
<tr id="table_1_R05">
<td id="table_1_R05C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">18</span></p>
</td>
<td id="table_1_R05C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">19</span></p>
</td>
<td id="table_1_R05C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">20</span></p>
</td>
<td id="table_1_R05C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">21</span></p>
</td>
<td id="table_1_R05C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">22</span></p>
</td>
<td id="table_1_R05C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">23</span></p>
</td>
<td id="table_1_R05C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">24</span></p>
</td>
</tr>
<tr id="table_1_R06">
<td id="table_1_R06C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">25</span></p>
</td>
<td id="table_1_R06C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">26</span></p>
</td>
<td id="table_1_R06C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">27</span></p>
</td>
<td id="table_1_R06C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">28</span></p>
</td>
<td id="table_1_R06C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">29</span></p>
</td>
<td id="table_1_R06C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">30</span></p>
</td>
<td id="table_1_R06C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">31</span></p>
</td>
</tr>
</table>