Is anchoring a TR possible?

Question

It is possible outside an element tr link some address as below?

<a href="www.enderecodesejado.com.br"></a>

If it is not possible, Javascript would solve this or better forget?

I have the following table as shown in the image below, and I wanted when the user clicked on a line to be directed to an X address.

Answer 1

Unfortunately there is no specific construction for this. You will have to do "in hand".

It is relatively simple to do with jQuery and data-* Attributes. Example:

Javascript:

$('tr').click(function() {
    window.location.href = $(this).attr('data-href');
});

HTML:

<table>
  <tr>
    <th>
      Empresa
    </th>
    <th>
      CEO
    </th>
  </tr>
  <tr data-href="http://www.google.com/">
    <td>
       Google
    </td>
    <td>
      Larry Page
    </td>
  </tr>
  <tr data-href="http://www.yahoo.com/">
    <td>
        Yahoo!
    </td>
    <td>
      Marissa Mayer
    </td>
  </tr>
  <tr data-href="http://www.microsoft.com/">
    <td>
        Microsoft
    </td>
    <td>
      Steve Ballmer
    </td>
  </tr>
</table>

Most complete example (including style).

Answer 2

Yes it is possible with javascript. Inserting links between table and tr is not correct syntax, so the path is actually javascript.

You can add an "Event Handler" that looks for clicks within the rows of the table. When a click happens it fetches the link from that line and opens it.

Example with jQuery:

var linhaTabela = $('table tr');
linhaTabela.on('click', function (event) {
    var link = $(this).find('a').attr('href')
    link && window.location = link;
});

Example

---

If there is no link inside the line as I mentioned in the example above, you can assign via your php the link information in a field data-, yes in the table row.

So my example is

html

<tr data-href="http://www.google.com">

javascript

var linhaTabela = $('table tr');
linhaTabela.on('click', function (event) {
    var link = $(this).data('href');
    link && window.location = link;
});

Example

Answer 3

If you wrap the <tr> in a <a>, your HTML will become invalid. I suggest you place the URL in an attribute data, and use a very similar code to Sergio’s to navigate to the destination.

HTML

<table>
    <tr data-url="http://www.enderecodesejado.com.br">
        <td>...</td>
    </tr>
</table>

Javascript (jQuery)

$('table').on('click', 'tr', function() {
    var url = $(this).attr('data-url');
    if(url) window.location = url;
});