Changing Cell colors on click 1

[Dashley]

I'm using the line of code below in classic asp. It fills in a table 5 col's wide and 20-30 rows. Each cell has the code below in it openning up a pop up window.

Client wants to know if - after they click on the link can the have the cell they clicked on change color so they can keep track of the ones they clicked on.

Is there a JS client side way to do this. Can someone point me in the right direction if there is.

Thanks

<a href="score_window.asp?area=A"  Style="text-Decoration:None" onClick="window.open('score_window.asp?area=Ab&uid=<%=userid%>&row=<%=row%>&col=<%=col%>', 'Scores', 'width=600, height=600, scrollbars=1'); return false">

 

[BillyRayPreachersSon]

Sure thing... Easiest way is to use classes & define a CSS rule:

[!]<style type="text/css">
.selected {
   background-color: gold;
}
</style>[/!]

...


onClick="window.open('score_window.asp?area=Ab&uid=<%=userid%>&row=<%=row%>&col=<%=col%>', 'Scores', 'width=600, height=600, scrollbars=1'); [!]this.parentNode.className = 'selected';[/!] return false;"

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Dashley]

Dan,

Thanks I tried it using this code

<style type="text/css">
.selected {
   background-color: gold;
}
</style>

<TABLE border="1">
<TR>
<TD onClick="this.parentNode.className = 'selected';" id="p1">HEY
<TR>
<TD onClick="this.parentNode.className = 'selected';" id="p2">HEY2
<TR>
<TD onClick="this.parentNode.className = 'selected';" id="p3">HEY3
</TABLE>

and it works great. If I remove last two <TR>'s
so its all in one row...

<style type="text/css">
.selected {
   background-color: gold;
}
</style>

<TABLE border="1">
<TR>
<TD onClick="this.parentNode.className = 'selected';" id="p1">HEY
<TD onClick="this.parentNode.className = 'selected';" id="p2">HEY2
<TD onClick="this.parentNode.className = 'selected';" id="p3">HEY3
</TABLE>

and click on one cell all three change color.

 

[BillyRayPreachersSon]

Yes - because you asked for help with a script that used anchros to change the background colour of the cell - not help with a script that changed the background colour of a row when clicking on cells. That's what you've turned the original script into. I don't even see an anchor in sight.

Perhaps your original code was not anything like your real code, but a contrived example? Perhaps your code has now changed, along with your requirements?

You should also understand how you should close your td and tr tags, really - it will ultimately make moving to xhtml much easier (do you even have a doctype?)

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Dashley]

Dan,

My appologies. When I got to work this morning I plugged in your code and wolah! it worked great and is indeed and was just what I needed.

After reading your response when I a arrived home last night, in my excitement and operating out of ignorance I put the above code above together (I didnt have the code from work at the house) hopeing to see how it works using what I thought would be a simplified model. In doing so I changed the ground rules as I can now see.

Your response was 100% correct based on my original question which is the actual code. In my eagerness last night it appears that I butchered it very effectively.

Thanks again for your response and your help. I really do appreciate it.


Dan

 

[derorim]

That works great. But how can I turn off the selected row color when the next row is clicked, so that only the most recently clicked row is colored?

Thanks,

Joy

 

[BillyRayPreachersSon]

You could give each row an ID, and store the ID of the clicked row. When any row is clicked, unset the className on the previous row, and then update the stored variable to point to the new row.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]