Making a TD clickable


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.

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.


Add the onClick event on the td mark.

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

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>

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.


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


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

&nbsp;

That should do the trick for you.