I Hope you can help

[si1]

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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

[hericles]

You will need to use javascript functions to do this. You will need to create a javascript function and refer to it in the on click event of each table data item e.g.

<td id="table_1_R06C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " onclick="changeColor(table_1_R06C07);">

You will need to pass through the ID of the table cell so you know which one to alter (using the document.getElementById method of javascript). Thats enough of a start and it should have provided enough hints to google what you need:)

[si1]

ok thank you hericles I have a problem with storing color in the individual cells using cookies. I would like the user to be able to edit each cell and be able to save or store it so that everyone can see the changes when visiting my website. But I have no idea to create this. Thank you in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<table id="myTbl" cellpadding="20" cellspacing="0">
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr>
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
</tr>
<tr>
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
</tr>
</table>
<script type="text/javascript">
var tdOA = document.getElementById('myTbl').getElementsByTagName('td');
var cellColours = ;
//assign the initial cell colour to each cell and the onclicks
for(i=0; i < tdOA.length; i++){
tdOA.curCol = 0;
tdOA.style.backgroundColor = cellColours[tdOA.curCol];
tdOA.onclick=function(){
this.curCol = (++this.curCol == cellColours.length)? 0 : this.curCol;
this.style.backgroundColor = cellColours[this.curCol];
}
}
</script>
</body>
</html>

[hericles]

You are going to need a database of some kind. Cookies are only stored on the user's computer and so wouldn't be viewable by anyone else. The a click event would be processed, the color changed and the and the database updated with the new color.

[si1]

ok thank you for your help