onclick event change background color of table cell

sheed · Jun 29, 2005

I am dynamically generating my table with 15 rows and 5 columns. How can I change the background color of a cell when the user clicks in the table cell. For example if a user clicks in the 1st column of the 1st row the color changes, now if the user clicks in 3rd column of the 4th row I want to change the color of this cell but also don't want to revert the color of the previous cell clicked. Idea is anytime a user clicks any cell it changes the color. Leave the color changed so the user knows what cells are already clicked.

Here is the code that dynamically generates the table columns and rows;

Code:

<table>
//start for
for(i=0;i<15;i++}
	<tr>
	<td>i</td>
	<td>i</td>
	<td>i</td>
	<td>i</td>
	<td>i</td>
	</tr>
//end for
</table>

Thanks

13sio · Jun 29, 2005

Code:

<body>
<table border=1>

<script>

for (var i=0;i<15;i++) {
  document.write('<tr>');
    for (var j=0;j<15;j++) {
      document.write('<td onclick=\"style.backgroundColor=\'red\';\">'+i+','+ j+'</td>');
    }
  document.write('</tr>');
}
</script>
</table>
</body>

sirlojik · Jun 30, 2005

this is off the top of my head, but it can be brushed up to dynamically create tables. pID is the element of parent. eg for the body of page
pID = document.getElementsByTagName('body')[0];

Code:

[red]//Dynamically Create Table[/red]
createTable = function (pID,cols,rows)
   {
   var _tab = document.createElement('table');
   var _bdy = document.createElement('tbody');
   for (var n = 0,n<cols,n++)
       {
       var tr = document.createElement('tr');
       for (var x=0,x<rows;x++)
           {
           var td = document.createElement('td');
           tr.appendChild(td);
           }
       _bdy.appendChild(tr);
       }
   _tab.setAttribute('border',1);
   _tab.appendChild(_bdy);
   pID.appendChild(_tab);
   return _tab;
   }

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...

sirlojik · Jun 30, 2005

Code:

</head>
<BODY>
<SCRIPT LANGUAGE='JAVASCRIPT'>
var clr1 = 'blue';
var clr2 = 'red';
var lastObj;

tr_md = function (e)
   {
   var el = e.srcElement;
   if (typeof(lastObj)=='object')
      {
      lastObj.style.backgroundColor = clr1;
      }       
   el.style.backgroundColor = clr2;
   lastObj = el;
   }

createTable = function (pID,cols,rows)
   {
   var _tab = document.createElement('table');
   var _bdy = document.createElement('tbody');
   for (var n = 0;n<cols;n++)
       {
       var tr = document.createElement('tr');
       for (var x=0;x<rows;x++)
           {
           var td = document.createElement('td');
           td.innerHTML ='sd';
           td.style.backgroundColor =clr1;
           td.attachEvent('onmousedown',tr_md);
           tr.appendChild(td);
           }
       _bdy.appendChild(tr);
       }
   _tab.setAttribute('border',1);
   _tab.appendChild(_bdy);
   pID.appendChild(_tab);
   return _tab;
   }

var x = createTable(document.getElementsByTagName('body')[0],3,3);
</SCRIPT>

</BODY>
</HTML>

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onclick event change background color of table cell

sheed

Programmer

13sio

Technical User

sirlojik

Programmer

sirlojik

Programmer

Similar threads

Part and Inventory Search

Sponsor