Row color change 3

[KevinFSI]

I posted this in the ColdFusion forum, but I really think it's just a JavaScript question.

Hey all. I have what I think is a very simple request. I have a table where each row is the result of a query. In other words, I never know how many rows are in the query. There is only one <TR> tag. Ok, I'm sure you all are with me so far.

I would like to be able to let my users click anywhere in a row and turn the bgColor of the row to Yellow. I was able to do this, but I would also like them to be able to click the row again to &quot;turn off&quot; the yellow background.

Here is what I've done. The yellow comes up fine, but doesn't go away.

In my <TR> I have:

<TR onClick=&quot;highlight(this)&quot;>

Which calls this function:

function highlight(row)
    {
       if (row.bgColor != 'Yellow')
       {
          row.bgColor = 'Yellow';
       }
       else
       {
          row.bgColor = 'White';
       }
    }

What do you think? Kevin
slanek@ssd.fsi.com

 

[jaredn]

maybe the color is being stored as lowercase internally? try using the same code but with all lowercase colors... jared@eae.net -

http://webfx.eae.net

 

[KevinFSI]

That didn't do it. I also tried hex values. No go.

I changed the if statement to read if(row.bgColor != '') change the bgColor to silver, otherwise change it to yellow. Clicking rows caused them to change to silver which means they're being read as not null, but I can't figure out how to say, &quot;if it's this particular color, do this. If it's not that color, do this.&quot; Kevin
slanek@ssd.fsi.com

 

[aperfectcircle]

I couldn't get it to work with color names, but it worked fine with hex colors like this...

function highlight(row)
{
if (row.bgColor != '#ffff00')
{
row.bgColor = '#ffff00';
}
else
{
row.bgColor = '#ffffff';
}
}

 

[aperfectcircle]

I stuck an alert in the if and else statements to see what color it was setting. It turns out that if you set the color to White, it sets it to #ffffff (lowercase) and if you set it to Yellow it sets it to #ffff00 (also lowercase).

So if you entered the hex values as uppercase, that is probably why it didn't work...

 

[KevinFSI]

Thanks!!! I was using capitol letters for my hex values. I never would have thought that would be case sensitive. When Jared mentioned case in my color names, it never occured to try lower case hex values as well. Thanks to the both of you.

I'm going to pick your brains further. Is there a way to do the same thing I'm doing, but rather than click to turn it off, have it revert back to its original color if another row is highlighted.

To be clearer (because I tend to ramble,) Let's say I highlight row one. I'm finished looking at it so I highlight row 5. Can I make row 5 highlight and row 1 revert back to its original color in one fluid motion? Kevin
slanek@ssd.fsi.com

 

[scotth4v]

<tr onMouseOver=&quot;javascript:this.bgColor='#ffff00'&quot; onMouseOut=&quot;javascript:this.bgColor='#ffffff'&quot;>

Done deal no need for an external function

-Scott

 

[KevinFSI]

Huge reason why this won't work. Not that you could have known, but this table is about a mile wide. It has 18 months of data horizonatally. What I was wanting the user (and myself) to do is click on a row then be able to scroll over to the right without getting lost.

I was looking at the data and realized I was losing my place when I would scroll over, so I thought, &quot;hey if I could highlight the row then scroll over...&quot; You see.

Thanks though. Kevin
slanek@ssd.fsi.com

 

[jaredn]

keep a client-side array of all the rows...onclick loop through and make all the other rows in the array revert to old color (prolly should use css classes for this) jared@eae.net -

http://webfx.eae.net

 

[KevinFSI]

A little beyond my scope of understanding, but I can read up on it over the weekend.

If you have any tips, I'll willingly accept them. Sounds like a good idea though. I use arrays often in CF, but not in JS, so I get the concept, but not the syntax. Kevin
slanek@ssd.fsi.com

 

[scotth4v]

Ahhh, I see what your're trying to do...

Try this: add a counter in the CF that assigns an ID to the TR, row1, row2, etc, then access that via DHTML...

<html>
<head>
	<title>Untitled</title>
	<script>
	var lastrow;
	if (lastrow = &quot;&quot;) then 
	   lastrow= &quot;row1&quot;
	   
	function changeIt(row){		
	lastrow.bgColor='#ffffff';	
	row.bgColor='#ffff00';
	lastrow= row;
	
	}

	</script>
</head>

<body>

<table border=&quot;1&quot;>
<tr id=row1 onclick=&quot;changeIt(this)&quot;><td>hello</td></tr>
<tr id=row2 onclick=&quot;changeIt(this)&quot;><td>hello</td></tr>
</table>


</body>
</html>

It works fine if you use the code above, you would just need to add the id name dynamically via CFML to the tr. in asp it would be something like:

<tr id=row<%=counter%> >

see what I'm saying?

 

[KevinFSI]

Thanks for the suggestion. The dynamic row naming is pretty easy in CF too. Excellent idea.

Thanks again to everybody. Kevin
slanek@ssd.fsi.com

 

[KevinFSI]

Hey Scott, got one more question. My rows alternate colors (for the sake of contrast between rows) based on whether they're odd or even.

In the function, where I turn the color back to white by clicking on a new row, how can I say if the row is odd make it this color, if it's even make it another color. I was trying to do something like this, but not having much luck.

if(lastrow % 2 == 0)

That would let me know if the row was odd or even. Obviously I'm doing something wrong though. Kevin
slanek@ssd.fsi.com

 

[scotth4v]

hmmm... Yikes The only obeject value I could get to convert to a number was &quot;rowIndex&quot;... this is kinda ugly, but here it goes (it starts at 0, so I increment it by 1)...

if((lastrow.rowIndex + 1) % 2 == 0)
    lastrow.bgColor='#c0c0c0';		
else	
    lastrow.bgColor='#ffffff';

that should do it...

 

[KevinFSI]

Thanks again. I don't see rowIndex anywhere in this stupid book of mine. Had I seen it, I might not have had to bother you again.

Lots of help!!! Kevin
slanek@ssd.fsi.com

 

[scotth4v]

No problem!

Get the &quot;Dynamic HTML Reference and Software Development Kit&quot; from Microsoft Press, it lists all of the HTML/DHTML elements and all of thier associated properties... comes in handy! It's been a lifesaver on more than one occasion!

It also lists all supported DHTML/Javascript Methods and is an awesome DOM reference!

-Scott

 

[KevinFSI]

Noted!

Thanks for all the help. Kevin
slanek@ssd.fsi.com