Making an entire cell of a table respond to a click.

  • Thread starter Thread starter Mufasa
  • Start date Start date
M

Mufasa

I have cell that I want to be able to have the user click the cell anywhere
and it will link to somewhere else. I want to use a cell because I want it
to be 25% of the width of the screen ( I have 4 'buttons' to do this.) I
don't want to use a graphic because I want it to be able to resize.

Any suggestions?

In a perfect world, I'd also like to have it change color when somebody goes
over it.

TIA - Jeff.
 
Mufasa said:
I have cell that I want to be able to have the user click the cell anywhere
and it will link to somewhere else. I want to use a cell because I want it
to be 25% of the width of the screen ( I have 4 'buttons' to do this.) I
don't want to use a graphic because I want it to be able to resize.

Any suggestions?

In a perfect world, I'd also like to have it change color when somebody
goes over it.
Click to expand...


<td style="cursor:pointer;" onclick="location.href='page2.aspx';"
onmouseover="this.style.backgroundColor='Green';"
onmouseout="this.style.backgroundColor='White';">
 
That works great!

Is there anyway to automate it into a CSS or some othere way so I don't have
to do it every single time?

TIA - Jeff.
 
<td style="cursor:pointer;" onclick="location.href='page2.aspx';"
onmouseover="this.style.backgroundColor='Green';"
onmouseout="this.style.backgroundColor='White';">
Click to expand...

So that's how you do this sort of thing in ASP.NET 2.0, huh? Looks an awful
lot like plain old HTML to me.

How do you go about implementing this sort of thing "cleanly" for server
controls that ultimately generate tables, such as a calendar or gridview?
 
You can only put styles (the cursor in this case) in css, the events
(onmouseover, onmouseout, onclick) must appear in a tag somewhere. The
location change is a javascript so it can't go in a style sheet either.

However, you can put the different styles into a css class and do this:

<style>
..overClass {background-color: Green}
..outClass {background-color:White}
</style>
<td onmouseover="this.className='overClass'"
onmouseout='this.className='outClass'> content </td>

John
nice clean examples at www.nicecleanexample.com


Mufasa said:
That works great!

Is there anyway to automate it into a CSS or some othere way so I don't
have to do it every single time?

TIA - Jeff.
Click to expand...
 
When generating table cells on the server you'd set the appropriate
attributes, as in:

TableCell td = new TableCell();
td.Attributes.Add("onmouseover","this.style.backgroundColor='Green'");

John
nice clean examples at www.nicecleanexample.com
 
Thanks for all the info.

Jeff.

John Mott said:
When generating table cells on the server you'd set the appropriate
attributes, as in:

TableCell td = new TableCell();
td.Attributes.Add("onmouseover","this.style.backgroundColor='Green'");

John
nice clean examples at www.nicecleanexample.com
Click to expand...
 
<td style="cursor:pointer;" onclick="location.href='page2.aspx';"
When generating table cells on the server you'd set the appropriate
attributes, as in:

TableCell td = new TableCell();
td.Attributes.Add("onmouseover","this.style.backgroundColor='Green'");
Click to expand...

Yeah, that's obvious enough if you're building the controls yourself--but
the crux of my question had to do with server controls that don't easily
give you access to the individual rows or cells. How would you go about
implementing, for example, an onclick event for the month name in a calendar
control? As far as I can see, the calendar object doesn't have a member
mapped to that particular <td>, and looking at the raw HTML output, it has
no ID either.

So under those circumstances, is "the best way" to hook up an event to try
to locate the correct cell by its position in the control collection--which
makes your code highly susceptible to break?
 
Back
Top