OnClick changes TD cell color. How can I click to change it back? 1

jonnyGURU · Jan 12, 2005

This:

<td onClick="this.bgColor='#DDDDDD'">

Gives me the effect I want. But what if I want the color to change back to #FFFFFF if the user clicks on the table cell a second time?

Is there an event handler for this?

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

trollacious · Jan 12, 2005

Try:

<td onClick="if (this.bgColor=='#FFFFFF'){this.bgColor='#DDDDDD'} else {this.bgColor='#FFFFFF'}">

Lee

jonnyGURU · Jan 12, 2005

MAN! That so looked right, but it doesn't do anything at all for me.

Why wouldn't that work?

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

jonnyGURU · Jan 12, 2005

Aha!

You know what it is? By default, the cell doesn't have a color. So this:

<td onClick="if (this.bgColor==''){this.bgColor='#DDDDDD'} else {this.bgColor='#FFFFFF'}">

works, but only for one click on and one click off. So, if I change it to do this:

<td onClick="if (this.bgColor==''){this.bgColor='#DDDDDD'} else {this.bgColor=''}">

It actually works!

Thanks!

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

jonnyGURU · Jan 12, 2005

Too bad that doesn't work for Table Rows. I guess because there's nothing in a Table Row you can really click on except for TD's. A TD you can just have a   in and it works.

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

kaht · Jan 12, 2005

jonnyGURU, for table rows:

Code:

<html>
<head>
<script language=javascript>

function changeColor(obj) {
   newColor = (obj.style.backgroundColor == '') ? '#DDDDDD' : '';
   rowObj = obj.parentElement;
   for (i = 0; i < rowObj.childNodes.length; i++) {
      rowObj.childNodes[i].style.backgroundColor = newColor;
   }
}  

</script>
</head>
<body>

<form>
<table cellpadding=2 border=1>
   <tr>
      <td onclick='changeColor(this)'>1,1</td>
      <td onclick='changeColor(this)'>1,2</td>
      <td onclick='changeColor(this)'>1,3</td>
   </tr>
   <tr>
      <td onclick='changeColor(this)'>2,1</td>
      <td onclick='changeColor(this)'>2,2</td>
      <td onclick='changeColor(this)'>2,3</td>
   </tr>
   <tr>
      <td onclick='changeColor(this)'>3,1</td>
      <td onclick='changeColor(this)'>3,2</td>
      <td onclick='changeColor(this)'>3,3</td>
   </tr>
   <tr>
      <td onclick='changeColor(this)'>4,1</td>
      <td onclick='changeColor(this)'>4,2</td>
      <td onclick='changeColor(this)'>4,3</td>
   </tr>
</table>
</form>
</body>
</html>

-kaht

trollacious · Jan 12, 2005

This will also work:

Code:

<script language="javascript">
function changerowcolor(rowID)
{
var onerow=document.getElementById(rowID);
if (onerow.style.backgroundColor=='')
  {
  onerow.style.backgroundColor='#DDDDDD';
  }
else
  {
  onerow.style.backgroundColor='';
  }

}
</script>
<table border="1">
<tr id="row1">
<td onClick="changerowcolor('row1')">&nbsp;&nbsp;&nbsp;</td>
<td onClick="changerowcolor('row1')">&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr id="row2">
<td onClick="changerowcolor('row2')">&nbsp;&nbsp;&nbsp;</td>
<td onClick="changerowcolor('row2')">&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>

Lee

jonnyGURU · Jan 12, 2005

Damn. You guys are good. Those are both excellent examples.

I didn't get the reply until after I had already nested a row inside a cell, so it works, but doesn't look as clean as what you guys are offering up (do nested tables ever look "clean" in the source?)

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

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 changes TD cell color. How can I click to change it back? 1

jonnyGURU

IS-IT--Management

trollacious

Programmer

jonnyGURU

IS-IT--Management

jonnyGURU

IS-IT--Management

jonnyGURU

IS-IT--Management

kaht

Programmer

trollacious

Programmer

jonnyGURU

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor