• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

Change bgcolor on click...then change back....

I have a table that is built dynamically with PHP that contains a link to change the location of an iframe.  I want the tabel row to change color when this link is clicked, then if the use selects another link, that row changes colow, and the first will change back to its original.
How can I accomplish this?
2 Solutions
Take a look at this and see if it is what you are looking for: http://tech.irt.org/articles/js207/
Here is what it actually looks like: http://tech.irt.org/articles/js207/window.htm
Something like this:

<script language="javascript">
function highlightRow(row) {
    row.style.background = 'gray';

function unhighlightRows() {
    for (var i=1; i<=3; i++) {
        document.getElementById("row" + i.toString()).style.background = 'red';

<tr name="row1" onclick="highlightRow(this);" style="background: gray"><td>r1c1</td><td>r1c1</td></tr>
<tr name="row2" onclick="highlightRow(this);" style="background-color: gray"><td>r2c1</td><td>r2c1</td></tr>
<tr name="row3" onclick="highlightRow(this);" style="background-color: gray"><td>r3c1</td><td>r3c1</td></tr>
maundedAuthor Commented:
Cool...heres something I forgot to mention..whoops.
Each alternate row is a different color.  This is done using a PHP script which changes the tr bgcolor property
Is there any way to pass that back to the unhighlightRows function?
<script type="text/javascript">
var lastrow, lastbg;
function highlightRow(row){
  if(lastrow != null)
    lastrow.style.backgroundColor = lastbg;
  lastbg = row.style.backgroundColor;
  row.style.backgroundColor = "red";
  lastrow = row;
<tr name="row1" onclick="highlightRow(this);" style="background: green"><td>r1c1</td><td>r1c1</td></tr>
<tr name="row2" onclick="highlightRow(this);" style="background-color: blue"><td>r2c1</td><td>r2c1</td></tr>
<tr name="row3" onclick="highlightRow(this);" style="background-color: purple"><td>r3c1</td><td>r3c1</td></tr>
maundedAuthor Commented:
Excellent work gentlemen!!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now