I Hope you can help

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.

</tr>
<tr id="table_1_R02">

</tr>
<tr id="table_1_R03">

</tr>
<tr id="table_1_R04">

</tr>
<tr id="table_1_R05">

</tr>
<tr id="table_1_R06">

</tr>

</table>

2

Contributors

4

Replies

2 Days

Discussion Span

1 Year Ago

Last Updated

5

Views

Question
Answered

si1

Newbie Poster

3 posts since Mar 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

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

hericles

Veteran Poster

1,065 posts since Nov 2007

Reputation Points: 156

Solved Threads: 228

Skill Endorsements: 9

1 Year Ago

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>

si1

Newbie Poster

3 posts since Mar 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

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.

hericles

Veteran Poster

1,065 posts since Nov 2007

Reputation Points: 156

Solved Threads: 228

Skill Endorsements: 9

1 Year Ago

0

ok thank you for your help

si1

Newbie Poster

3 posts since Mar 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Question Answered as of 1 Year Ago by hericles

I Hope you can help

This question has already been solved: Start a new discussion instead