Why doesn't the `href` attribute on the `` element work?

Question

I've set up a fiddle with a table.

You see, Im trying to make a table where the user will hover and click the td to show an id. Check the fiddle out and you'll understand.

Now, When the user hovers Parent4, you may notice there's space on the table where there's no text and the user can't click it so the Child4 wont appear....

Now, is there any way I can make the space where there's no text clickable so it shows up child4?

I tried

<td ahref="#child4"> but didn't work...

////?EDIT As its a bit confusing...

I need you to see the fiddle. You can see the cell for Parent4 is bigger than the text. So when the user hovers on the cell I want the text to change color and the cell to change color too + if the user clicks the cell Child4 won't appear because a cell is unclickable, so My question, how can I make the cell clickable to display Child4?

UPD:

I didn't update the fiddle, but it's now up to date.

He means 4's in your question you meant child4 but in your fiddle there is no td with the code you provided in your question — Kierchon, Oct 11 '13 at 20:14
You should post all of your code the JSfiddle even if its broken cause then we have all of it, can see the entire problem, and then fix it — Kierchon, Oct 11 '13 at 20:19
@Kierchon Ok, I've updated my question so Its more understandeable. — user2766367, Oct 11 '13 at 20:25

James Donnelly · Accepted Answer · 2013-10-11T20:29:32.103

42

The href property is designed for anchor elements (<a/>). "ahref" as you've put should be <a href="">. a is an element of its own, not a HTML attribute, and href is an attribute it accepts.

To make the text of a td clickable you can simply put an anchor within it:

<td>
    <a href="#child4">My clickable text</a>
</td>

Edit: To fix this now that the question has been added, simply add in the following CSS:

td a {
    display:block;
    width:100%;
}

What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space.

Working JSFiddle.

edited Oct 11 '13 at 20:29

answered Oct 11 '13 at 20:10

James Donnelly

126,410
34
208
218

I don't know if you see the fiddle at all... Parent1 – user2766367 Oct 11 '13 at 20:13
I saw your fiddle, but it doesn't really match the code used in your question (which is a bit confusing). The code in your fiddle actually appears to work. – James Donnelly Oct 11 '13 at 20:20
@user2766367 there is no "child4" in your fiddle. – James Donnelly Oct 11 '13 at 20:26
@user2766367 I've updated my answer to get this working. Hope this helps! :) – James Donnelly Oct 11 '13 at 20:29
Wow, I thought I tried that...Now, if I would like to change color of the link, when hovering on the td, what could I do? Btw thank you for your tim! – user2766367 Oct 11 '13 at 20:34
All you need is : td a { display:block; } to make it work. – Brian Smith Dec 29 '17 at 21:15
@BrianSmith but then you break away from the table layout, making it invalid markup. – James Donnelly Dec 29 '17 at 21:25
I have a variation on this where it doesn't quite work so I make a separate question: https://stackoverflow.com/questions/51407309/clickable-td-including-the-vertical-space-under-the-text. But your answer still gets my vote! – ssimm Jul 18 '18 at 17:02

score 13 · Answer 2 · answered Oct 11 '13 at 20:12

13

Add the onClick event on the td mark.

<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>

answered Oct 11 '13 at 20:12

Jonysuise

1,790
13
11

1

Please would you refer to the fiddle? I tried doing But didn't work... – user2766367 Oct 11 '13 at 20:16

Totoro53 · Answer 3 · 2017-10-25T12:07:49.337

12

There is a very simple way of doing this with just HTML. Put the link text inside a DIV. The DIV occupies the whole TD and makes it all clickable.

<a href="http://whatever.com">
  <div>
     Link Text
  </div>
</a>

edited Oct 25 '17 at 12:07

answered Nov 12 '15 at 15:24

Totoro53

338
4
17

score 0 · Answer 4 · answered Oct 11 '13 at 20:14

0

If you're trying to make an area clickable with no text, you can define the size of the tag like so:

<a href='#child4' class="parent" style="display: block;width: 300px;height: 10px;"></a>

This will create the block without any object or text inside.

answered Oct 11 '13 at 20:14

Marc Ripley

813
1
6
19

Is there any way to create an element with text, but whose button still covers the entire element? – E-A Oct 26 '20 at 12:57

score 0 · Answer 5 · answered Dec 18 '18 at 14:00

Just wanted to add two ways that actually worked inside the for me:

Using Angular 5:

a. in [yourname].component.html:

  <table id='myTable'>
     <tr><td (click)="myClick()">my cell</td>...

b. In [yourname].component.ts: (inside your exported class.. ) simply implement the needed function..

   export class [youyname].... {

     ....
     myClick() {
     }
   }

Pure JS:

  <script>

      function myClick(){
          console.log("got here");
          // Do Whatever you want
      }
  </script>


  <div id='myDiv'>
    <table id='myTable'>
       <tr><td onClick="myClick()">Yo..</td><td>....

The easiest way..

(Note: It's possible to put the script inside the tag, or even load an external JS file inside it, but I don't like doing it like that.)

score 0 · Answer 6 · answered Dec 04 '20 at 20:45

0

Very Simple way is just adding onClick='myFunction()' Ex:

<table>
<tr>
<td onClick="myFunction()">hello</td>
</tr>
</table>

answered Dec 04 '20 at 20:45

KoderM

382
2
15

score 0 · Answer 7 · answered Jan 07 '21 at 22:08

0

If using pug/jade try the following;

tr(onclick="document.location.href='http://www.google.com';")
  td.py-2.align-middle

answered Jan 07 '21 at 22:08

utf8mb4

13
4

score -4 · Answer 8 · answered Oct 11 '13 at 20:16

-4

Simplest thing would be to populate the "empty" cell with:

&nbsp;

That should do the trick for you.

answered Oct 11 '13 at 20:16

LuFaMa

346
1
6
15

1

– LuFaMa Oct 11 '13 at 20:28
You could also do Display: block; of a href. – Cam Oct 11 '13 at 20:32
This does not really answers OP's question – J.Wincewicz Sep 30 '21 at 06:11

Why doesn't the `href` attribute on the `` element work?

8 Answers8

Linked