Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Javascript Change Table Row Color

  1. #1
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    **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.
    Last edited by Trinithis; 09-27-2007 at 08:01 PM.
    Trinithis

  3. #3
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.)
    Last edited by Trinithis; 09-27-2007 at 08:14 PM.
    Trinithis

  5. #5
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  6. #6
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

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

  7. #7
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That was it.

    Thanks a ton!

    David

  8. #8
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by davidz View Post
    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,686
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    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">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Gazi (09-20-2010)

  11. #10
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thanks a lot

    ooooooooooh Great Jhon it really worked. Much appriciated

    tons of thanks again.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •