1,105,352 Community Members

I Hope you can help

Member Avatar
si1
Newbie Poster
3 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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>

Member Avatar
hericles
Veteran Poster
1,078 posts since Nov 2007
Reputation Points: 98 [?]
Q&As Helped to Solve: 232 [?]
Skill Endorsements: 14 [?]
Featured
 
0
 

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:)

Member Avatar
si1
Newbie Poster
3 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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>

Member Avatar
hericles
Veteran Poster
1,078 posts since Nov 2007
Reputation Points: 98 [?]
Q&As Helped to Solve: 232 [?]
Skill Endorsements: 14 [?]
Featured
 
0
 

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.

Member Avatar
si1
Newbie Poster
3 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

ok thank you for your help

Question Answered as of 2 Years Ago by hericles
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article