I Hope you can help

Question

si1 0 Newbie Poster

14 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>

user-interface web-design

2 Contributors
4 Replies
129 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by si1

Dani AI

Generated 9 Months Ago

A practical, maintainable way to make each cell cycle colors and persist the result for everyone is to use CSS classes + event delegation on the client, then save each change to a simple JSON API on the server. This keeps styling out of inline attributes, keeps the click logic small, and makes persistence and recovery straightforward. (Builds on hint about persistence and addresses s goal of sharing changes across visitors.)

Example client pattern (CSS + event listener + POST to API):

/* small CSS theme */
.col-white { background:#ffffff; }
.col-gray  { background:#dddddd; }
.col-red   { background:#ffcccc; }
.col-blue  { background:#ccccff; }

// client: event delegation + cycle + save
const colors = ['white','gray','red','blue'];
const table = document.getElementById('myTbl');

table.addEventListener('click', e => {
  const td = e.target.closest('td');
  if (!td || !table.contains(td)) return;
  const cur = colors.indexOf(td.dataset.color || 'white');
  const next = colors[(cur + 1) % colors.length];
  colors.forEach(c => td.classList.remove('col-' + c));
  td.classList.add('col-' + next);
  td.dataset.color = next;

  fetch('/api/cellColor', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ cell: td.dataset.cell, color: next })
  }).catch(err => console.error('save failed', err));
});

Server-side: keep a tiny table keyed by cell_id (or table_id + cell_id) and accept POSTs to update or insert. Example schema: CREATE TABLE cell_colors(cell_id TEXT PRIMARY KEY, color TEXT, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP); Provide an endpoint to return all saved colors as JSON on page load and apply them to matching data-cell cells.

Practical notes: use stable data-cell IDs, validate input server-side, handle CORS/auth if needed, and consider WebSockets for live multi-user sync. For client-only, localStorage can persist per-browser state (see MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). For network saves use the Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

All 4 Replies

hericles 289 Master Poster

14 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

14 Years Ago

ok thank you for your help

I Hope you can help

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers