CLickable <td> <tr>

HTML & CSS
1

Hi,
How can I make a whole <td> or <tr> clickable instead of just the word. for instance:

<table>
<tr>
<td>
<a href = “home.asp”>Home</a></td></tr></table>

Thanks

2

This is a CSS issue, not ASP. Try this code on for size:


<table>
<tr>
<td class="click">
<a href = "home.asp">Home</a></td></tr></table>

Put this in your stylesheet:


.click a {
  display: block;
}
3

Thanks,
what about if I want it to be clickable on the whole <tr> instead of just a <td>
also if I want it to be clackable on two <td>s. I tried it but it didn t work

Thanks again

4

In that case, you’d have to use Javascript:


<tr onclick="location.href = this.getElementsByTagName("a").item(0).getAttribute("href");"><td><a href="/index.asp">Home</a></td></tr>
5

just do:


<tr onclick="document.location='home.asp'" style="cursor:hand">
6

Thanks Guys

The last option is easier

Thanks again

7
Off Topic:

The proper cursor is “pointer”, not “hand”. :wink:

8

Ok, I usually use the hand so they know it is a link!

9

Yeah, but hand is IE-only, while pointer is the standard method that works on all browsers. They both bring up the same cursor.

10

How can I make it change colour when users mouse over?
I tried using onmouseover = “red” but didnt work

11

I sorted out the colour problem.

I want to use the clickable <tr> example on the example below but it doesn t seem to work. I have a table with a clickable value “ref”. when a user clicks on it, it shows another form with the values related to that row only. This works fine but when i try to make the whole <tr> clickable, it doesn t work.

can you please advise

<%
while not rsTypes.EOF
%><tr align = center onclick=“document.location= ‘editsands.asp’” style=“cursor:hand”>
<% Response.write “<td align = center><a href=”“editsands.asp?ref=” & rsTypes.Fields.item(“ref”).Value & “”“>” & rsTypes.Fields.item(“ref”).value & “</a></td>”
Response.write “<td>” & rsTypes.Fields.item(“requester”).Value & “</td>”
Response.write “<td>” & rsTypes.Fields.item(“intext”).Value & “</td>”

Response.write “</tr>”
rsTypes.MoveNext
wend
%>

Many thanks again

12

try:


<tr align="center" onclick="document.location='editsands.asp'" style="cursor:hand">
13

Thanks
I tried it but it generates an error. i need to find a way to link it to the value on the form “ref”
any ideas?

Cheers

14

Looks like this is turning into a JS question, please ask it over in the Javascript section :slight_smile:

15

hm9,

Please don’t post duplicate threads. It causes unnecessary clutter in the forums. Thanks.

16

Here’s an easy way:


<tr>
   <td><a href="home.asp" class="clickable">Home</a></td>
</tr>

And the CSS:


<style type="text/css">
a.clickable   { width: 100%; height: 100%; }
a.clickable:hover   { background-color: #FF0000; color: #FFFFF; }
</style>

You may also have to add padding: 0px; or margin: 0px; to the a.clickable class.

17

You forgot one important part of the equation:


display: block;

Without that, the browser won’t set the width/height properties, since a link is inline content.

18

Wierd, I’ve not actually used that and it always seemed to work for me. Or maybe I did use it and forgot. Good catch, Vinnie.

19

IE will incorrectly set the width/height of inline content, giving the appearance that it’s supposed to work. Fun stuff eh? :wink:

20

Thanks guys, but there is still a problem of how to make the whole <tr> clickable using the code below.

Any ideas?

<%
while not rsTypes.EOF
Response.write “<tr class=”“clickable”" >"
Response.write “<td align = center class=”“clickable”“><a href=”“editsands.asp?ref=” & rsTypes.Fields.item(“ref”).Value & “”“>” & rsTypes.Fields.item(“ref”).value & “</a></td>”
Response.write “<td>” & rsTypes.Fields.item(“requester”).Value & “</td>”
Response.write “<td>” & rsTypes.Fields.item(“intext”).Value & “</td>” Response.write “</tr>”
rsTypes.MoveNext
wend
%>

Thanks again