Wrapping HTML table rows in tags

Question

Is it possible to wrap entire table rows in tags? I want the the entire row to be a clickable link.

If I try the following, the links get rend

Answer 1

It's invalid HTML to have any elements other than thead,tbody or tfoot as a direct child of a table, and those elements have only tr as their valid children.

Any other content must be inside of a td or th to be valid.

What you're seeing is the browser restructuring your DOM so that it's as valid as it can be. The problem with relying on that behaviour though is that different browsers react in different ways.

If you need a tr to be interactive (and for clicks on those elements to lead somewhere/do something) you should use JavaScript.

But, short answer, yes you can do it, but it's not valid to do so, so please don't.

For interactive table rows, though, one solution (in plain JavaScript):

var rows = document.getElementsByTagName('tr'),
    url;

for (var i=0,len=rows.length; i<len; i++){
    rows[i].onclick = function(){
        uri = this.getAttribute('data-url');
        window.location = uri;
    };
}

JS Fiddle demo.

(Which, obviously, requires that the tr elements have a data-url attribute to specify where they should link to.)

Answer 2

You could use onclick, so you can get the content dynamically

<td onclick="window.location='http://www.google.com';" style='cursor: pointer;'>Hello</td>

http://jsfiddle.net/ankJw/

Answer 3

The solutions provided here helped me, but I don't think that using window.location is a good approach because user cannot do ctrl+click, open in another tab, or see where the url is going to. I'm building this page and I like to see the url built without clicking it, and chrome shows this on hover. I could not get over this, so I decided to use @Bojangles suggestion above to wrap each td with a link.

First, add the data-href to each tr, as others suggested.

Then, wrap each td in a link via js:

    jQuery(document).ready(function ($) {
        //wrap each td's contents with a hyperlink targeting the data-href 
        $('*[data-href]').children("td").wrapInner(function () {
            return "<a href='" + this.parentElement.attributes["data-href"].value + "'></a>";
        });
    });

optionally, use css to make the hyperlink use up all of the cell

    table tr a {
        display:block; /*the link occupies the whole cell, so it's all clickable*/
    }

Answer 4

Why you don't want to make click event on tr ? It's not possible to have anchor tag like you want so you can make click event and add aditional CSS for making it to look like anchor.

Jquery:

$("table tr").click(function() {
    window.location = "http://www.google.com/";
});

Answer 5

You could also use display: contents;. This causes the a tags childs to behave like they are a child of the a tags parent.

In your HTML:

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <a href="https://example.com" style="display: contents;">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
    <a href="https://example.com" style="display: contents;">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
  </tbody>
</table>

Support in different browsers should be enough most of the times (see https://caniuse.com/#feat=css-display-contents).

Answer 6

Another simple, CSS only solution is turning <a> into block elements

<tr>
  <td><a href="#">name 1</a></td><td><a href="#">link 1</a></td>    
</tr>
<tr>
  <td><a href="#">name 2</a></td><td><a href="#">link 2</a></td>    
</tr>

The CSS would be:

td > a {
  display: block;
}

Then the <a> would take up the entire <td>, and making entire row clickable without JS if the link is repeated for each cell in a row.

https://jsfiddle.net/evwa451n/