Here is my Fiddle

How can I make the entire <tr> as clickable.

In the fiddle all the elements like text and images are clickable, but i want to make the entire <tr> clickable. I won't want to make the jQuery query action, as it won't show the href icon while hovering it.

How can I do this ?

I read this question but it still uses jQuery on click event, which won't show the href icon while hovering it

Here is my HTML

<table border=1>
  <tbody>

    <tr>
      <td style="display: none;">
        13467.36232877521
      </td>
      <td style="display: none;">
        0
      </td>
      <td width="5%" >
        <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
          <img src=".png" alt="image" height="58px" width="58px" style="margin: -8px 0px -9px -7px;" />
        </a>
      </td>
      <td width="25%">
        <div class="semibold">
          <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
                                                                            Juice Generation Demo 1  
                                                                        </a>
        </div>
        <div class="text-muted"><i class="fa fa-heart yellow"></i> 0</div>
      </td>
      <td width="35%">
        <div class="text-muted">
          <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
                                                                            Juice Generation, 9th Avenue, New York, NY, United States
                                                                        </a>
        </div>
      </td>
      <td width="35%" class="text-right">
        <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
          <img src=".png" alt="image" height="36px" width="40px" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

Here is my Fiddle

How can I make the entire <tr> as clickable.

In the fiddle all the elements like text and images are clickable, but i want to make the entire <tr> clickable. I won't want to make the jQuery query action, as it won't show the href icon while hovering it.

How can I do this ?

I read this question but it still uses jQuery on click event, which won't show the href icon while hovering it

Here is my HTML

<table border=1>
  <tbody>

    <tr>
      <td style="display: none;">
        13467.36232877521
      </td>
      <td style="display: none;">
        0
      </td>
      <td width="5%" >
        <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
          <img src="http://greenhoppingbucket.s3.amazonaws./store/profile/1458470633N4IjGniw81.png" alt="image" height="58px" width="58px" style="margin: -8px 0px -9px -7px;" />
        </a>
      </td>
      <td width="25%">
        <div class="semibold">
          <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
                                                                            Juice Generation Demo 1  
                                                                        </a>
        </div>
        <div class="text-muted"><i class="fa fa-heart yellow"></i> 0</div>
      </td>
      <td width="35%">
        <div class="text-muted">
          <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
                                                                            Juice Generation, 9th Avenue, New York, NY, United States
                                                                        </a>
        </div>
      </td>
      <td width="35%" class="text-right">
        <a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
          <img src="http://greenhoppingbucket.s3.amazonaws./tip/1456942351fQoyY8DNZd.png" alt="image" height="36px" width="40px" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

• javascript
• jquery
• html
• css

• just google! stackoverflow./questions/17147821/… – pierrebeitz Commented Mar 20, 2016 at 12:10
• 1 Possible duplicate of html - table row like a link – The Codesee Commented May 27, 2016 at 6:24
• check this link this answer is what you are searching for – Sulyman Commented Oct 22, 2017 at 7:57

4 Answers 4

A bination of the above should do the trick.

1. Add recognizable class to your element.

   <tr class="clickable" data-href="http://website/your_href"></tr>
   

2. Write CSS for the element to appear clickable.

   .clickable {
       cursor: pointer;
   }
   

3. Make the thing clickable using Javascript:

   var elements = document.getElementsByClassName('clickable');
   for (var i = 0; i < elements.length; i++) {
       var element = elements[i];
       element.addEventListener('click', function() {
           var href = this.dataset.href;
           if (href) {
               window.location.assign(href);
           }
       });
   }
   

Try putting display as block.

td a { 
   display: block; 
}

Fiddle

Also have a look at answer in this question too.

All you need to do is add cursor: pointer; to have it look like its clickable and then add an ID to it if you want to actually make the entire tr tag clickable. IE:

 <tr id="clickable">

CSS

 tr { cursor: pointer; }

You can do it by using javascript. Maybe:

$("tr").click(function() {
    // what to do
});