How to add hyperlink to table row <tr>

Question

I am having a table with its table row <tr> generating in a loop to form multiple rows.

I want to give separate <a> link to each <tr> . Since in table we can add only add data to <td> only, I am not able to achieve that.

Is there any other way to achieve this?

Answer 1

Html:

<table>
    <tr href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr href="http://apple.com">
      <td>Apple</td>
    </tr>
    <tr href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JavaScript using jQuery Library:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

You can try this here: http://jsbin.com/ikada3

CSS (optional):

table tr {
    cursor: pointer;
}

OR the HTML valid version with data-href instead of href :

<table>
    <tr data-href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr data-href="http://apple.com">
      <td>Apple</td>
    </tr>
    <tr data-href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JS:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

CSS:

table tr[data-href] {
    cursor: pointer;
}

Answer 2

Playing off of @ahmet2016 and keeping it W3C standard.

HTML:

<tr data-href='LINK GOES HERE'>
    <td>HappyDays.com</td>
</tr>

CSS:

*[data-href] {
    cursor: pointer;
}

jQuery:

$(function(){       
    $('*[data-href]').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

Answer 3

The easiest way I've found to turn a table row into a link is to use the onclick attribute with window.location.

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>

Answer 4

If you're saying that you want to make each <tr> clickable, you can add a click event to each <tr> , or better yet, add a .delegate() handler to the table that manages clicks on its <tr> elements.

$('#myTable').delegate('tr','click',function() {
    alert( 'i was clicked' );
});

This code assumes your table has the myTable ID:

<table id="myTable">
    <tr><td> cell </td></tr>
    <tr><td> cell </td></tr>
</table>

If this isn't what you meant, then please clarify your question, and post the relevant javascript code you're using.

Answer 5

I agree with the first response, more information is needed. But if you're just trying to make a table of links, you can just do

<tr><td><a href="...">...</a></td></tr>

Answer 6

The premium suggestion would be to add the tags when you generate the table. If you need to do it after the table is rendered and you want to use javascript you can always add something like

var mytable = document.getElementById("theTable")
var myrows = mytable.rows

for(i=0;i < myrows.length;i++)
{
  var oldinner;
  oldinner = myrows[i].cells[0].innerHTML;
  myrows[i].cells[0].innerHTML = "<a>" + oldinner + "</a>";
}

or if you need to do it to every cell, your can always

var mytable = document.getElementById("theTable")
var myrows = mytable.rows

for(i=0;i < myrows.length;i++)
{
  mycells = myrows[i].cells;

  for(a=0;a < mycells.length;a++)
  {
    var oldinner;
    oldinner = mycells[a].innerHTML;
    mycells[a].innerHTML = "<a>" + oldinner + "</a>";
  }
}

I hope you find this helpful

Answer 7

PHP:

echo "<tr onclick=\"window.location='".$links[$i]."'\">......";

Javascript without jQuery:

 x=1;
 .
 .
 for (...) {
   var tr=document.createElement('tr');
   tr.onclick=function() { window.location='page'+(x++)+'.html'}
   tr.style.cursor='pointer';
 .
 }

will let the user click on each row you can use an array to load the pages too:

 x=0;
 var pages=["pagea.html","pageb.html"]
 .
 .
 for (...) {
   var tr=document.createElement('tr');
   tr.onclick=function() { window.location=page[x++];}
   tr.style.cursor='pointer';
 .
 }

Answer 8

You can use data-href script to add href in any html elements. It makes html valid since it add only data-href attribute to a element.

https://github.com/nathanford/data-href/

Answer 9

<tr><td><a></a></td></tr>

这个？

Answer 10

jQuery.wrap返回的锚到td然后添加到tr和jQuery.appendTo table

$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');

Answer 11

You can simply gen the with and inside as Nicole suggested:

<tr><td><a href="url">title of the url</a></td></tr>

Or put the url in the tr tag like With jQuery included

$('tr.clickable').click(function(){
  window.location = $(this).attr("title");
});

to bring you to that page on click (basically hacking a tr to work like a tag (just a thought, never really try it.

Answer 12

add in

and change display style to display:block

and add same size for like this:

CSS:

#Table a {
display:block;
}
#Table td {
width:100px;
hright:100px
}

HTML:

<table id="Table">
    <tr><td><a onclick="" href="#"> cell </a></td></tr>
    <tr><td> cell </td></tr>
</table>