Menu
I have a table with rows, that when clicked, take the user to a page with more detailed information about the item that row was describing. Unfortunately, it always changes the current page, and our users would like to be able to middle-mouse/control click the rows in order to open a new tab if they want to. This choice is available with normal links, but not with my onclick it seems. An example is shown below:
<html>
<body>
<table border='1'>
<tr onclick='window.open("http://www.google.com")'>
<td>Open Another Window</td>
</tr>
<tr onclick='location.href="http://www.google.com"'>
<td>Change Current Page</td>
</tr>
</table>
</body>
</html>
What is the best way to simulate a normal link with an onclick event so the behaviour will be the same across different os/browsers, which I believe have different bindings for what triggers opening a link in a new tab.
418
This works for me:
<tr onclick="window.open('http://www.google.com','_blank')">
I just stumbled across this question because I was also looking for a solution. Here is a possible solution. It opens the page normally when clicked normally and in a new tab if the middle button is used.
You can add a table class (like clickable-rows) to easily apply this behavior to your tables. Then add a data attribute (like data-href) with the link.
<!DOCTYPE html>
<html>
<body>
<table>
<tr class="clickable-row" data-href="http://www.google.com">
<td>Clickable row 1</td>
</tr>
<tr data-href="http://www.google.com">
<td>Non clickable row</td>
</tr>
<tr class="clickable-row" data-href="http://www.google.com">
<td>Clickable row 2</td>
</tr>
</table>
<script>
// loop through the table rows with the clickable-row class, and turn them into clickable rows by
// setting the cursor to a pointer, and adding a mousedown listener to open in the current page
// if left-clicked, or open in a new tab if middle-clicked
let rows = document.querySelectorAll("tr.clickable-row");
rows.forEach((clickableRow) => {
clickableRow.style.cursor = "pointer";
clickableRow.addEventListener("mousedown", function(e) {
e.preventDefault();
var href = this.getAttribute('data-href');
if (e.button === 1)
{
window.open(href, "_blank");
}
else if (e.button === 0)
{
window.location = href;
}
})
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
