Jump to content

[SOLVED] Javascript Change Table Row Color

davidz

By davidz
in Javascript Help

 Share

Recommended Posts

davidz Member

davidz

Posted
Posted

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

 

 

Link to comment
Share on other sites
emehrkay Regular Member

emehrkay

Posted
Posted

I built a full example for you that removes all of the inline javascript

 

<!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 cellActions(){
	var rows = document.getElementById('test').getElementsByTagName('tr');
	var len = rows.length;

	function otherCells(idx){
		for(var i = 0; i < len; i++){
			if(i != idx) rows[i].style.backgroundColor = '#fff';
		}
	}

	for(var i = 0; i < len; i++){
		rows[i].onclick = function(){
			otherCells(i);
			this.style.backgroundColor = '#f00';
		};

		//now you can add more events like onblur or onmouseover onmouseout
		rows[i].onmouseover = function(){
			//do stuff here
		};	

	}
}

window.onload = function(){
	cellActions();
}

</script>
</head>

<body>
<table width="200" border="1" cellspacing="0" id="test">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

Link to comment
Share on other sites
davidz Member

davidz

Posted
  • Author
Posted

Thank for the great example.  But my JavaScript abilities are pretty bad, and I can't seem to make it work.  If I just copy and paste your code into a new HTML file it works fine.  But it won't integrate with my current code.

 

Now my table has div's and styles and other stuff in the <TD> tags.  Are these going to cause problems?  I can't seem to find why I get absolutely nothing.

 

David

Link to comment
Share on other sites
davidz Member

davidz

Posted
  • Author
Posted

Alright here is a complete HTML page with some of the problems.  For some reason after I chopped it up the highlight started working, but with other problems.

 

<!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 cellActions(){
	var rows = document.getElementById('test').getElementsByTagName('tr');
	var len = rows.length;

	function otherCells(idx){
		for(var i = 0; i < len; i++){
			if(i != idx) rows[i].style.backgroundColor = '#fff';
		}
	}

	for(var i = 0; i < len; i++){
		rows[i].onclick = function(){
			otherCells(i);
			this.style.backgroundColor = '#f00';
		};

		//now you can add more events like onblur or onmouseover onmouseout
		rows[i].onmouseover = function(){
			//do stuff here
		};	

	}
}

window.onload = function(){
	cellActions();
}

</script>
</head>

<body>

  
<div style="overflow:auto; width:745px; height: 250px; padding:0px; margin:0px; border-bottom: 1px black solid; border-top: 1px black solid;">
<table id="test" width=727 class=smalltable border=0 cellpadding=0 cellspacing=0 >
<col width=40>
<tr id="row1"style="background-color: #FFFFCC;";>
<td><a href=# onClick="getPropertyData('1674','8-801');"><img name="View1" border="0" src="images/view.gif"></a></td>
<td><a onClick="getPropertyData('1674','8-801');" target=_blank href=view_entry.php?entryID=755671&ref=ef2a2af07e4fb6bc04591ec634c14358>09/20/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">MEDINA SUSANA AND MEDINA DANIEL</div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">MORTGAGE ELECTRONIC REGISTRATION SYS INC</div></td>
<td><div style="text-align:left;"><a onClick="getPropertyData('1674','8-801');" target=_blank href=view_entry.php?entryID=616079&ref=0f705412a787ccb898f1f3a02a92101c>$212,400</a></div></td>
<td> </td>
<td> </td>
</tr>

<tr id="row2"style="background-color: #FFFFFF;";>
<td><a href=# onClick="getPropertyData('1673','23');" ><img name="View2" border="0" src="images/view.gif"></a></td>
<td><a onClick="getPropertyData('1673','23');" target=_blank href=view_entry.php?entryID=755631&ref=e46e43ce5b37ae05179f22ee3904192a>09/20/2007</a></td>
<td><div title="SEWELL BRIAN G" style="width:130px; height:15px; overflow:hidden; text-align:left;">SEWELL BRIAN G</div></td>
<td><div title="" style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div title="VILLAGE BANK" style="width:130px; height:15px; overflow:hidden; text-align:left;">VILLAGE BANK</div></td>
<td><div style="text-align:left;"><a onClick="getPropertyData('1673','23');" target=_blank href=view_entry.php?entryID=588193&ref=8777aa783706bf5cadcf26625a62435d>$279,175</a></div></td>
<td> </td>
<td> </td>
</tr>

<tr id="row3"style="background-color: #FFFFCC;";>
<td><a href=# onClick="getPropertyData('1675','HT-35');" ></a></td>
<td><a onClick="getPropertyData('1675','HT-35');" target=_blank href=view_entry.php?entryID=755690&ref=e2686ac0d52e120595ddeeed7b2094be>09/20/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">VENSEL DAVID W AND VENSEL HOLLY M</div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">ARGENT MTG CO L C</div></td>
<td><div style="text-align:left;"><a onClick="getPropertyData('1675','HT-35');" target=_blank href=view_entry.php?entryID=635688&ref=a771d43a021bd04b663728ca12749bca>$156,000</a></div></td>
<td> </td>
<td> </td>
</tr>

<tr id="row4"style="background-color: #FFFFFF;";>
<td><a href=# onClick="getPropertyData('1666','3-44');"></a></td>
<td><a onClick="getPropertyData('1666','3-44');" target=_blank href=view_entry.php?entryID=755515&ref=f994bfb73f4cc74d4c9a29a541063bd4>09/19/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">TOBIN MICHAEL A AND AGUINAGA KATRINA F</div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">WELLS FARGO BANK</div></td>
<td><div style="text-align:left;"><a onClick="getPropertyData('1666','3-44');" target=_blank href=view_entry.php?entryID=626398&ref=32ef9f1a28fc9c2c2e3dd18eba81c4db>$144,000</a></div></td>
<td> </td>
<td> </td>
</tr>

<tr id="row5"style="background-color: #FFFFCC;";>
<td><a href=# onClick="getPropertyData('1663','9-4242');"><img name="View5" border="0" src="images/view.gif"></a></td>
<td><a onClick="getPropertyData('1663','9-4242');" target=_blank href=view_entry.php?entryID=755487&ref=57627f362517aa6d6c7439619d8c6561>09/19/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr id="row6"style="background-color: #FFFFFF;";>
<td><a href=# onClick="getPropertyData('1665','1-3');"><img name="View6" border="0" src="images/view.gif"></a></td>
<td><a onClick="getPropertyData('1665','1-3');" target=_blank href=view_entry.php?entryID=755513&ref=c35e11ccf2f747287a23bddf4cdb1ee5>09/19/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">HIGGINS R DAMEON</div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">MORTGAGE ELECTRONIC REGISTRATION SYS INC</div></td>
<td><div style="text-align:left;"><a onClick="getPropertyData('1665','1-3');" target=_blank href=view_entry.php?entryID=545298&ref=775d766c29aafb880b83f856714c2f12>$228,000</a></div></td>
<td> </td>
<td> </td>
</tr>

<tr id="row7"style="background-color: #FFFFCC;";>
<td><a href=# onClick="getPropertyData('1667','AUG-5');"><img name="View7" border="0" src="images/view.gif"></a></td>
<td><a onClick="getPropertyData('1667','AUG-5');" target=_blank href=view_entry.php?entryID=755526&ref=5cd116fb1e6a913eded19577df7f153b>09/19/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">HANSEN DAVID J</div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;">MORTGAGE ELECTRONIC REG SYS INC</div></td>
<td><div style="text-align:left;"><a onClick="getPropertyData('1667','AUG-5');" target=_blank href=view_entry.php?entryID=665151&ref=f6930d6be76a0cc1a523f84e77b3d7a8>$412,000</a></div></td>
<td> </td>
<td> </td>
</tr>

<tr id="row8"style="background-color: #FFFFFF;";>
<td><a href=# onClick="getPropertyData('1664','PSE-15');"><img name="View8" border="0" src="images/view.gif"></a></td>
<td><a onClick="getPropertyData('1664','PSE-15');" target=_blank href=view_entry.php?entryID=755501&ref=9d3991d20ea4a6da3e3c536e398412b6>09/19/2007</a></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td><div style="width:130px; height:15px; overflow:hidden; text-align:left;"></div></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>

Link to comment
Share on other sites
emehrkay Regular Member

emehrkay

Posted
Posted

ok, the problem was that it was rewriting the origingal backgorund color with #fff. I added an array to hold the original background color

 

<script type="text/javascript">
function cellActions(){
	var rows = document.getElementById('test').getElementsByTagName('tr');
	var len = rows.length;
	var orig_bkg = [];

	function otherCells(idx){
		for(var i = 0; i < len; i++){
			if(i != idx) rows[i].style.backgroundColor = orig_bkg[i];
		}
	}

	for(var i = 0; i < len; i++){
		orig_bkg.push(rows[i].style.backgroundColor);
		rows[i].onclick = function(){
			otherCells(i);
			this.style.backgroundColor = '#f00';
		};

		//now you can add more events like onblur or onmouseover onmouseout
		rows[i].onmouseover = function(){
			//do stuff here
		};	

	}
}

window.onload = function(){
	cellActions();
}

</script>

Link to comment
Share on other sites
davidz Member

davidz

Posted
  • Author
Posted

Nice!! That seems to work exactly like I need it to.  Hopefully now I can make it work with my PHP page that generates all this stuff.  I'll reply here tomorrow if I still can't get it to work.

 

Thanks for the help!!!

David

 

PS Could it not be working because of other onClick events that I have in this table?

Link to comment
Share on other sites
emehrkay Regular Member

emehrkay

Posted
Posted

yes, othe onclick events could cancel each other out. im not too sure though. create a test page and add an inline onclick and a listened on click(like in the examle) and see if they both fire

 

 

I would also suggest that you use classes to define the styling of the html -

 

class="alt_row" etc

 

and in the js do

 

ele.className = 'whatever'; instead of ele.style.backgroundColor = 'whatever'

Link to comment
Share on other sites
davidz Member

davidz

Posted
  • Author
Posted

I just defined the getPropertyData function with no output, and it still worked, so I'll have to try it on my full page.

 

As per the styling, I know it's messy, the page is still pretty early in development.  I really need to try and eliminate some of the div/style tags.

 

Just out of curiosity, why is it better to use class definitions rather that inline styling?

 

Thanks,

David

Link to comment
Share on other sites
davidz Member

davidz

Posted
  • Author
Posted

I think I figured out my problem.  I think the problem is:

window.onload = function(){
cellActions();

 

When this code loads the table is not there.  The php is still producing it.  So if I put 

<div onClick="cellActions();">HERE</div>

At the bottom somewhere and click on "HERE".  Then the highlights start working.  So is there some alternative to window.onload that can happen after the page is finished?

 

-David

Link to comment
Share on other sites
emehrkay Regular Member

emehrkay

Posted
Posted

the answer to your problem would be to put the window.onload function at the bottom of your page. have php produce it after the table is finished loading. there would be no need to have  user click anywhere to be able to have visual effects. window.onload should only work after the page has finsihed loading anyway, it must be somethign else

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.