I Hope you can help

Question

si1 0 Newbie Poster

12 Years Ago

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>

web-design

2 Contributors
4 Replies
117 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by si1

All 4 Replies

hericles 289 Master Poster

12 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

si1 0 Newbie Poster · Answer 1 · 2012-03-09T22:54:16+00:00

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 289 Master Poster Featured Poster · Answer 2 · 2012-03-10T03:28:00+00:00

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 0 Newbie Poster · Answer 3 · 2012-03-10T06:33:07+00:00

si1 0 Newbie Poster

12 Years Ago

ok thank you for your help

I Hope you can help

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers