Making a TD clickable

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 und

Answer 1

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

Answer 2

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>

Answer 3

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

 

That should do the trick for you.

Answer 4

Add the onClick event on the td mark.

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

Answer 5

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.

Answer 6

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

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