Table Row onclick - change page, or open new tab

Question

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.

If your table rows only have one cell, why are you using a table for this layout? Is this truly meant to display table data? Anyway this was asked previously. Here's a pretty good answer, but popup blocking will block your tab from opening: https://stackoverflow.com/a/11384018/7569308 — jsonp, Jan 08 '20 at 03:08
The example only has one cell, but my real-world scenario doesn't. I do have a table of data to show. — Programster, Jan 18 '20 at 12:18

score 3 · Answer 1 · answered Jan 22 '20 at 09:27

3

This works for me:

<tr onclick="window.open('http://www.google.com','_blank')">

answered Jan 22 '20 at 09:27

Ahmad MOUSSA

2,729
19
31

3

Your solution solves part of the problem nicely, specifically how to open a new page when a row is clicked. The OP would like their users to have the option: click opens in same page, right click gives the option to open in a new page. – William T. Mallard Mar 06 '20 at 06:02

Marco · Accepted Answer · 2022-08-18T08:41:48.183

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>

Thanks for your answer!. Unfortunately, that code didn't actually work, but it was enough to get me to a workable solution that I made here using the same principles, but without requiring jQuery etc: https://files.programster.org/public/gists/clickable-table-rows/index.html I didn't want to massively change your answer, but if you were to either fix your code example, or copy/paste the example I gave into your answer, I will be happy to mark it as the solution :) — Programster, Aug 18 '22 at 08:27
Thank you @Programster for the working example, that's great. I just copy/pasted as you suggested. — Marco, Aug 18 '22 at 08:42

score 0 · Answer 3 · answered Jun 25 '13 at 09:07

0

Instead of handling the click event of the table row, use an anchor tag. The default behaviour for Ctrl+click for anchors is to open the URL in the href attribute in a new window or tab. If you want a new tab or window opened without the Ctrl button, you can use the target attribute of the anchor as well.

<td><a href="http://www.google.com" target="_blank">open another window or tab</a></td>

answered Jun 25 '13 at 09:07

Nick

146
1
7

8

The whole point is that the action is tied to the table row (this is why I use 'onclick'), not the cells or the cell content. It is easy enough to just create an 'a href' link in a td, but I need an action tied to if the user clicks anywhere on the row. – Programster Jun 25 '13 at 14:16

score -1 · Answer 4 · answered Mar 11 '22 at 14:06

-1

<tr onclick="window.open('./putyourlink.php')"> it's still work to me also but pls put '_blank' like another answer it's good more </tr>

answered Mar 11 '22 at 14:06

นีราภา ตองติดรัมย์

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 11 '22 at 17:13

Table Row onclick - change page, or open new tab

4 Answers4