Is an TR anchoring possible?

8

Is it possible for outside of a tr element to link any address as below?

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

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

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

    
asked by anonymous 11.01.2014 / 21:13

3 answers

7

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

It's 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) .

    
11.01.2014 / 21:44
3

If you wrap <tr> in <a> , your HTML will become invalid. I suggest you put the URL in a data attribute, and use a very similar code to Sergio 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;
});
    
11.01.2014 / 21:45
3

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

You can add an event handler that looks for clicks within the table rows. When a click happens, it will fetch the link from that line and open 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 within the line as I mentioned in the example above, you can assign via your php the link information in a data- field, there 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

    
11.01.2014 / 21:28