Mimic behavior on hover and on click with javascript

Question

I have a table and each row should link to a page.

I want to keep the structure of the html as is (not a bunch of divs and a grid like Wrapping HTML table rows in <a> tags)

Everything works with the javascript, but I am missing the bottom left tooltip that shows the url on hover from an tag. I also want the option to open in a new tab with CMD (mac) or CTRL (windows/linux).

I am currently doing the solution with jQuery:

    $('.clickable-row').on('click', function () {
        const url = $(this).attr('data-url')
        if (typeof url === 'string') {
            window.location.href = url
        }
    });

My html (twig):

        <table class='table'>
            <thead>
                <tr>
                    {% for h in data.header %}
                        <th>{{h|trans}}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in data.rows %}
                    {% set url = data.getOnClickURL(loop.index - 1) %}
                    <tr {% if url %} class='clickable-row' data-url="{{url}}" {% endif %}>
                        {% for r in row %}
                                <td>{{r|trans}}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>

For the tooltip, you can just add an attribute to your `` like `title="{{url}}"`. As for opening in a new window / tab with a modifier key, you can look at the highest upvoted answer to this question: https://stackoverflow.com/questions/1828613/check-if-a-key-is-down — icecub, Jan 13 '23 at 15:38
If you want all of the built-in browser features of an ``, you would really be better off just using an ``. You can pretty much guarantee that you will miss at least a few of the hundreds of browser/OS/device specific features if you try and build them yourself in JS. — DBS, Jan 13 '23 at 15:47
you can put an empty in td and use position absolute to cover the entire or as per your requirements. — ahmed moeed, Jan 13 '23 at 15:53

ahmed moeed · Answer 1 · 2023-01-13T15:50:40.233

try this solution without writing Javascript code using only HTML and CSS.

table {
    width: 100%;
    border-collapse: collapse;
}

table tr {
    position: relative;
}
table tr td {
    border: 1px solid black;
    text-align: center;
}

table tr a {
    position: absolute;
    width: 100%;
    display: block;
    height: 100%;
    top: 0px;
    left: 0px;
}

<table>
  <tr>
    <td><a href="https://google.com"></a> 1 </td>
    <td>2 </td>
    <td>3 </td>
  </tr>
<tr>
    <td><a href="https://github.com"></a>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
<tr>
    <td><a href="https://stackoverflow.com/"></a>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
<tr>
    <td>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
<tr>
    <td>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
</table>

Mimic behavior on hover and on click with javascript

1 Answers1