Javascript Change Table Row Color

I have a simple Javascript that changes the background color of the table row you click on and then switches it back when you click on a different one.

Here is the relevant code:

Code:

---

<script language="JavaScript">
function toggle(x,origColor){
        var newColor = 'red';
        if ( x.style ) {
                x.style.backgroundColor = (newColor == x.style.backgroundColor)? origColor : newColor;
        }
}
</script>

---

And the relevant HTML:

Code:

---

<table width=700 border=0 cellpadding=0 cellspacing=0 >
<tr id='1' style="background-color: #FFFFCC>
<td>
<a href=# onFocus="toggle(document.getElementById('1'),'#FFFFCC');" onBlur="toggle(document.getElementById('1'),'#FFFFCC');">
<img name="View1" border="0" src="images/view.gif">
</a>
</td>
</tr>

<tr id='2' style="background-color: #FFFFFF>
<td>
<a href=# onFocus="toggle(document.getElementById('2'),'#FFFFCC');" onBlur="toggle(document.getElementById('2'),'#FFFFCC');">
<img name="View2" border="0" src="images/view.gif">
</a>
</td>
</tr>

<tr id='3' style="background-color: #FFFFCC>
<td>
<a href=# onFocus="toggle(document.getElementById('3'),'#FFFFCC');" onBlur="toggle(document.getElementById('3'),'#FFFFCC');">
<img name="View3" border="0" src="images/view.gif">
</a>
</td>
</tr>
</table>

---

This repeates for several hundred rows (PHP+MySQL).


So my problem is not with the above code, it works perfect. But in my javascript I am using the alternate color as "red". If I try and use something like "#FFFF00" it breaks it.

Any suggestions?

David

**EDIT: new code without id's or new properties

First things first, you are missing quotes in your several of your tags. Also a number is not a valid id. Any javascript identifier is a valid id, aka: "r1"

An added alert(x.style.backgroundColor) reveals that for Firefox backgroundColor is converted to "rgb(#, #, #)" and in IE convertes the string to lowercase (such as "#F00" to "#f00" or "#Ff0000" to "#ff0000").

One solution is to add a property of your own to the element's style or to the element itself, storing the new color as you inputted it.

Code:

---

<style type="text/css">
#mrTable {
        width: 700px;
        border-collapse: collapse;
        }
#mrTable tr {
        cursor: pointer;
        text-decoration: underline;
        color: #00f;
        }
#mrTable tr:hover {
        color: #002;
        }
</style>
<table id="mrTable">
        <tr style="background-color: #ffc">
                <td>
                xx1xx
                </td>
        </tr>
        <tr style="background-color: #fff">
                <td>
                xx2xx
                </td>
        </tr>
        <tr style="background-color: #ffc">
                <td>
                xx3xx
                </td>
        </tr>
</table>
<script type="text/javascript" />
(function() {
        var color = "f00";
        var rows = document.getElementById("mrTable").getElementsByTagName("tr");
        var n = rows.length;
        var bgcs = [];
        for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
        function changeColor(e) {
                if(!e) e = window.event;
                var o = e.target? e.target: e.srcElement;
                while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
                for(var i=0; i<n; ++i) {
                        rows[i].style.backgroundColor = bgcs[i];
                        if(rows[i]==o) rows[i].style.backgroundColor = color;
                        }
                }
        if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
        else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
        })();
</script>

---

Just so you know, I tested it, your technique can create a bug if you "focus" two rows at the same time. So I rewrote it as above.

I replaced the anchor tags with a style because href="#" is annoying in firefox because it goes onto the back/forward history.

You should note that the td background-colors MUST be defined either through javascript or through an inline style for this to work. A style tag won't do the trick here. It won't also work properly if you dynamically add rows. If you need that feature, I can alter it.

Thanks for the tips. I will start working on these. And yes the rows are created dynamically, so that would be very much appreciated.

David

This will work with dynamic row content.

Don't forget: when you remove a td from the table, the alternating color effect you want will be missing at that removed spot. So to fix that, redo all the row's initialBackgroundColor property I added (a property of the element, not its style). You will have to reset them also if you add a row in the middle of the table instead of the end. If you still have any questions, ask some more.

I was wrong in saying that you have to use inline background-color or javascript for the above code to work.

Code:

---

<style type="text/css">
#mrTable {
        width: 700px;
        border-collapse: collapse;
        }
#mrTable tr, #mrTable td {
        cursor: pointer;
        text-decoration: underline;
        color: #00f;
        }
#mrTable tr:hover {
        color: #002;
        }
</style>
<table id="mrTable">
        <caption></caption>
        <thead><tr><td></td></tr></thead>
        <tfoot><tr><td></td></tr></tfoot>
        <tbody>
        <tr style="background-color: #ffc">
                <td>
                xx1xx
                </td>
        </tr>
        <tr style="background-color: #fff">
                <td>
                xx2xx
                </td>
        </tr>
        <tr style="background-color: #ffc">
                <td>
                xx3xx
                </td>
        </tr>
        </tbody>
</table>

<script type="text/javascript" />

function addBackgroundColorChange(table, backgroundColor) {
        table = table.getElementsByTagName("tbody")[0];
        var rows = table.getElementsByTagName("tr");
        function changeColor(e) {
                if(!e) e = window.event;
                var o = e.target? e.target: e.srcElement;
                while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
                for(var i=0, n=rows.length; i<n; ++i) {
                        if(!rows[i].initialBackgroundColor) rows[i].initialBackgroundColor = rows[i].style.backgroundColor;
                        rows[i].style.backgroundColor = rows[i].initialBackgroundColor;
                        if(rows[i]==o) rows[i].style.backgroundColor = backgroundColor;
                        }
                }
        if(document.addEventListener) table.addEventListener("click", changeColor, false);
        else table.attachEvent("onclick", changeColor);
        }

addBackgroundColorChange(document.getElementById("mrTable"), "f00");

</script>

---

PS: The tbody is essential to have with dynamic row content in some browsers. I also think the caption, thead, and tfoot need to be there too. (If not, I think the html validator will cough up your code anyway.)

I get this error when I try your latest code:

Code:

---

table has no properties

---

It Looks like

Code:

---

addBackgroundColorChange(null, "f00")

---

And this getElementById is not working:

Code:

---

addBackgroundColorChange(document.getElementById("mrTable"), "f00");

---

Here is the whole page:

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function addBackgroundColorChange(table, backgroundColor) {
table = table.getElementsByTagName("tbody")[0];
var rows = table.getElementsByTagName("tr");
function changeColor(e) {
        if(!e) e = window.event;
        var o = e.target? e.target: e.srcElement;
        while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
        for(var i=0, n=rows.length; i<n; ++i) {
                if(!rows[i].initialBackgroundColor) rows[i].initialBackgroundColor = rows[i].style.backgroundColor;
                rows[i].style.backgroundColor = rows[i].initialBackgroundColor;
                if(rows[i]==o) rows[i].style.backgroundColor = backgroundColor;
                }
        }
if(document.addEventListener) table.addEventListener("click", changeColor, false);
else table.attachEvent("onclick", changeColor);
}
addBackgroundColorChange(document.getElementById("mrTable"), "f00");
</script>
<style type="text/css">
#mrTable {
        width: 700px;
        border-collapse: collapse;
        }
#mrTable tr, #mrTable td {
        cursor: pointer;
        text-decoration: underline;
        color: #00f;
        }
#mrTable tr:hover {
        color: #002;
        }
</style>
</head>
<body>
<table id="mrTable">
        <caption></caption>
        <thead><tr><td></td></tr></thead>
        <tfoot><tr><td></td></tr></tfoot>
        <tbody>
        <tr style="background-color: #ffc">
                <td>
                xx1xx
                </td>
        </tr>
        <tr style="background-color: #fff">
                <td>
                xx2xx
                </td>
        </tr>
        <tr style="background-color: #ffc">
                <td>
                xx3xx
                </td>
        </tr>
        </tbody>
</table>
</body>
</html>

---

You need to place the script code after you have defined the table in your HTML.

That was it.

Thanks a ton!

David

Quote:

---

Originally Posted by davidz

I have a simple Javascript that changes the background color of the table row you click on and then switches it back when you click on a different one.

Here is the relevant code:

Code:

---

<script language="JavaScript">
function toggle(x,origColor){
        var newColor = 'red';
        if ( x.style ) {
                x.style.backgroundColor = (newColor == x.style.backgroundColor)? origColor : newColor;
        }
}
</script>

---

And the relevant HTML:

Code:

---

<table width=700 border=0 cellpadding=0 cellspacing=0 >
<tr id='1' style="background-color: #FFFFCC>
<td>
<a href=# onFocus="toggle(document.getElementById('1'),'#FFFFCC');" onBlur="toggle(document.getElementById('1'),'#FFFFCC');">
<img name="View1" border="0" src="images/view.gif">
</a>
</td>
</tr>

<tr id='2' style="background-color: #FFFFFF>
<td>
<a href=# onFocus="toggle(document.getElementById('2'),'#FFFFCC');" onBlur="toggle(document.getElementById('2'),'#FFFFCC');">
<img name="View2" border="0" src="images/view.gif">
</a>
</td>
</tr>

<tr id='3' style="background-color: #FFFFCC>
<td>
<a href=# onFocus="toggle(document.getElementById('3'),'#FFFFCC');" onBlur="toggle(document.getElementById('3'),'#FFFFCC');">
<img name="View3" border="0" src="images/view.gif">
</a>
</td>
</tr>
</table>

---

This repeates for several hundred rows (PHP+MySQL).


So my problem is not with the above code, it works perfect. But in my javascript I am using the alternate color as "red". If I try and use something like "#FFFF00" it breaks it.

Any suggestions?

David

---

Hi there,

The tricks in javaScript given by you people are really awesome. I am working on javaScript and I have small issues with the code.

I am using the code like this:

<html>
<head></head>
<body >

<table id="mstrTable" width="100%";>
<tr "background-color: #fff">
<td>

<a href="#">Link1</a>
</td>
</tr>
<tr "background-color: #fff">
<td>
<a href="#">Link2</a>
</td>
</tr>
<tr "background-color: #fff">
<td>
<a href="#">Link3</a>
</td>
</tr>
</table>
<script type="text/javascript" />
(function() {
var color = "f00";
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
function changeColor(e) {
if(!e) e = window.event;
var o = e.target? e.target: e.srcElement;
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<n; ++i) {
rows[i].style.backgroundColor = bgcs[i];
if(rows[i]==o) rows[i].style.backgroundColor = color;
}
}
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
})();
</script>
</body>
</html>

I have two issues here:

1) The first row i.e "Link1" must be highlighted with red color on pageLoad.
and
2) The hyperlink must work when clicked any where on the row.

Please help me as soon as possible.

Thanks in advance.

Additions highlighted (one top, one near the bottom):

Code:

---

<html>
<head><style type="text/css">
td a {
        display: block;
        height: 100%;
}
</style></head>
<body >

<table id="mstrTable" width="100%";>
<tr "background-color: #fff">
<td>

<a href="#">Link1</a>
</td>
</tr>
<tr "background-color: #fff">
<td>
<a href="#">Link2</a>
</td>
</tr>
<tr "background-color: #fff">
<td>
<a href="#">Link3</a>
</td>
</tr>
</table>
<script type="text/javascript" />
(function() {
var color = "f00";
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
rows[0].style.backgroundColor = color;
function changeColor(e) {
if(!e) e = window.event;
var o = e.target? e.target: e.srcElement;
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<n; ++i) {
rows[i].style.backgroundColor = bgcs[i];
if(rows[i]==o) rows[i].style.backgroundColor = color;
}
}
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
})();
</script>
</body>
</html>

---

Note: This -

Code:

---

<tr "background-color: #fff">

---

is invalid and meaningless. The default color for tr is transparent though, and the page is white anyway (also the default). Users can set their own defaults though. It and similar should be:

Code:

---

<tr style="background-color: #fff">

---

ooooooooooh Great Jhon it really worked. Much appriciated

tons of thanks again. :)