27

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.

6
  • 1
    The fiddle doesn't have any 4s Commented Oct 11, 2013 at 20:09
  • @ExplosionPills what do you mean by 4s? Commented Oct 11, 2013 at 20:14
  • 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
    Commented Oct 11, 2013 at 20:14
  • That's because the code I posted here didn't work... Commented Oct 11, 2013 at 20:17
  • 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
    Commented Oct 11, 2013 at 20:19

8 Answers 8

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.

8
  • I don't know if you see the fiddle at all... <a href='#child' class="parent1">Parent1</a> Commented Oct 11, 2013 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. Commented Oct 11, 2013 at 20:20
  • @user2766367 there is no "child4" in your fiddle. Commented Oct 11, 2013 at 20:26
  • @user2766367 I've updated my answer to get this working. Hope this helps! :) Commented Oct 11, 2013 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! Commented Oct 11, 2013 at 20:34
13

Add the onClick event on the td mark.

<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>
2
  • 1
    Please would you refer to the fiddle? I tried doing <td onClick="document.location.href='#child4"> But didn't work... Commented Oct 11, 2013 at 20:16
  • How to control/change the pointer/mouse to change to hand over link pointer? And also force open link in new tab?
    – Shubham A.
    Commented Nov 23, 2023 at 3:28
13

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>
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.

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

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

  1. 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() {
         }
       }
    
  2. 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.)

0

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

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

If using pug/jade try the following;

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

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

&nbsp;

That should do the trick for you.

3
  • 1
    <a href='#child4' class="parent4">&nbsp;</a>
    – LuFaMa
    Commented Oct 11, 2013 at 20:28
  • You could also do Display: block; of a href.
    – Cam
    Commented Oct 11, 2013 at 20:32
  • This does not really answers OP's question Commented Sep 30, 2021 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.