Search code examples
javascripthtmlonclickhref

Table Row onclick - change page, or open new tab

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.

Solution

  • 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>