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, Whe

Solution 1:

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><ahref="#child4">My clickable text</a></td>

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

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

Solution 2:

Add the onClick event on the td mark.

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

Solution 3:

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.

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

Solution 4:

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

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

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

Solution 5:

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

1. Using Angular 5:

   a. in [yourname].component.html:

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

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

   exportclass [youyname].... {
   
        ....
        myClick() {
        }
      }
   

2. Pure JS:

   <script>functionmyClick(){
             console.log("got here");
             // Do Whatever you want
         }
     </script><divid='myDiv'><tableid='myTable'><tr><tdonClick="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.)