Javascript Change Table Row Color

[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:

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

<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

[Trinithis]

**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.

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

[davidz]

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

[Trinithis]

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.

<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.)

[davidz]

I get this error when I try your latest code:

table has no properties

It Looks like

addBackgroundColorChange(null, "f00")

And this getElementById is not working:

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

Here is the whole page:

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

[Trinithis]

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

[davidz]

That was it.

Thanks a ton!

David