Enable Open Link in New Tab with Javascript

Question

I want to have a table with clickable rows that upon clicking will redirect to another page. I'm accomplishing this right now with Javascript. However if you right click there's no option to "Open Link in New Tab" presumably because the browser only does this for links? Is there a way to enable this behavior?

Basically I want table rows to act like anchor tags.

Why not add links to the cells? Alternative is to hook into the oncontextmenu — mplungjan
– mplungjan, Commented Jul 8, 2011 at 4:57
You can't make an entire row a link since the row parent must be a tbody, thead or tfoot element. The link must be inside a cell. — RobG
– RobG, Commented Jul 8, 2011 at 5:03
RobG is correct. I guess I could just make a link per cell but was hoping for a more elegant solution. — jhchen
– jhchen, Commented Jul 8, 2011 at 5:05
@jcmoney—elegance is in the eye of the beholder.:-) Making an entire row a link might make users nervous about clicking on the table, whereas if links are clearly identifiable, users can be confident of what will happen when they click wherever. It's all about least surprise—unless you're developing a game of course.:-). — RobG
– RobG, Commented Jul 8, 2011 at 5:09

NoBugs · Accepted Answer · 2011-07-08 05:14:17Z

1

Have you tried setting the link in each cell? I had a similar problem, when I was trying to make a whole row like a link, I used a link in each data cell:

<td><a class="mylink" href="URL" target="_blank">...</a></td>
...
<style>mylink {display:block; text-decoration:none; color:black;}</style>

This target attribute will work even if JS is disabled.

edited Jul 8, 2011 at 5:14

answered Jul 8, 2011 at 5:00

NoBugs

9,34816 gold badges91 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jhchen Over a year ago

My question is not how to make a link open in a new tab. Rather it's to have the option show up when you right-click on a table row.

mplungjan · Accepted Answer · 2011-07-08 05:24:29Z

Here http://jsfiddle.net/mplungjan/v5JrS/ the fiddle does not position the menu but the script does - tested in Fx5 on Mac:

<html>
<head>
<style>
#menu { display:none; position:absolute;border:1px solid red; background-color:grey }
#menuLink { text-decoration:none }
tr { border:1px solid black}
</style>
<script>
window.onload=function() {

  var trs = document.getElementsByTagName("tr");

  for (var i=0,n=trs.length;i<n;i++) {
    trs[i].oncontextmenu=function(e) {
      document.getElementById("menuLink").href=this.cells[0].innerHTML;
      var menu = document.getElementById("menu");
      menu.style.left=(e)?e.pageX:event.clientX;
      menu.style.top=(e)?e.pageY:event.clientY;
      menu.style.display="block";
      return false;
    }
  }
  document.getElementById("menuLink").onclick=function() {
    document.getElementById("menu").style.display="none";
    // the following is not really needed since the target works
    // fine on its own
//    var w=window.open(this.href,this.target);
//    return w?false:true;
  }
}
</script>
</head>
<body>
<table>
    <tr>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>http://www.bing.com</td>
    </tr>
</table>
<div id="menu"><a id="menuLink" target="_blank" href="">Open in new window/tab</a></div>
</body>
</html>

Oleg Vaskevich · Accepted Answer · 2011-07-08 05:03:59Z

0

No, there is no way to enable this behavior easily to work on all browsers. What you have to do is manually update the href of your links to point to whatever page you want the user to go to. Note that this required use of anchor (<a>) tags, which may be difficult to do with table cells. Perhaps you can fill the cells with some sort of invisible image or play with CSS.

Look at http://www.webmasterworld.com/forum21/10629.htm - the fourth post.

answered Jul 8, 2011 at 5:03

Oleg Vaskevich

12.8k6 gold badges65 silver badges81 bronze badges

Collectives™ on Stack Overflow

Enable Open Link in New Tab with Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related