PDA

View Full Version : Javascript Change Table Row Color



davidz
09-27-2007, 05:32 PM
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
09-27-2007, 06:00 PM
**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
09-27-2007, 07:27 PM
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
09-27-2007, 08:02 PM
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
09-27-2007, 08:49 PM
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
09-27-2007, 11:43 PM
You need to place the script code after you have defined the table in your HTML.

davidz
09-27-2007, 11:44 PM
That was it.

Thanks a ton!

David

Gazi
09-20-2010, 02:03 PM
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
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.

jscheuer1
09-20-2010, 03:18 PM
Additions highlighted (one top, one near the bottom):


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


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


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

Gazi
09-20-2010, 06:15 PM
ooooooooooh Great Jhon it really worked. Much appriciated

tons of thanks again. :)

Gazi
09-22-2010, 08:21 PM
Hi Guys,
The above suggested code is working very fine. Though I have got one more requirement and I am breaking my head to align the anchor tags in TD's for vertically aligning in middle. The code I am using is given below:

<html>
<head><style type="text/css">

td a {
display: block;
height: 100%;
}
</style></head>
<body >

<table id="mstrTable" width="100%";>
<tr >
<td height="65" valign="middle" >

<a href="#">Link1</a>
</td>
</tr>
<tr >
<td height="65" >
<a href="#">Link2</a>
</td>
</tr>
<tr >
<td height="65">
<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>

Thanks.

riptide
09-23-2010, 02:34 PM
Are you trying to do this dynamically or if not you could just set the vertical alignment in mstrTable's style property.

Gazi
09-23-2010, 06:08 PM
Tried to assign Vertical alignment property for mstrTable, still unable to achive. And there is nothing dynamically, I have shown you the code as is.

jscheuer1
09-23-2010, 07:20 PM
The fact that the link is display block makes it follow its own vertical alignment rules. A block level element cannot innately have vertical alignment.

If we use a DOCTYPE that forces standards compliance, we can make its display table-cell:


<!DOCTYPE html>
<html>
<head><style type="text/css">
td a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
td {
height: 65px;
}
</style>

</head>
<body>

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

<a href="#">Link1</a>
</td>
</tr>
<tr style="background-color: #fff">
<td>
<a href="#">Link2</a>
</td>
</tr>
<tr style="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>

And it will respect the vertical alignment. But the link will no longer occupy the entire cell or row in the case of a single cell in the row as you have it. Using width 100% on the link for some reason (probably the table-cell display allows it only to be the width of its content) will not fix that. You had said you wanted that, but I think that's counterproductive. If the link occupies the entire cell/row, then the color change, if seen at all, will be very brief before the link fires.

But you may have other plans for the link or have it be to a named anchor on the page. We can make clicking on the cell do the same thing as clicking on the link would do, but unless that's to fire normally, I would need to know your plans for the link in order to carry that out properly.

However, if you just want the link to fire as a normal link (to another page or to a named anchor on the same page) when the row is clicked on, these changes to the javascript can accomplish that:


(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[i].style.cursor = 'pointer';
rows[i].onclick = function(){
location = this.getElementsByTagName('a')[0].href;
};
}
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);
})();

riptide
09-23-2010, 08:21 PM
what would happen if the links weren't display block?

jscheuer1
09-24-2010, 12:07 AM
what would happen if the links weren't display block?

No vertical-align could be applied to them.