How can I add an onclick event in JavaScript to navigate to a URL when a user clicks on an element?

General Discussions
, ,
1

I’m currently using JavaScript to add hover effects to a table row, and now I’d like to make it redirect to a specific page when clicked. What’s the best way to implement this kind of JavaScript navigate to URL behavior?

2

Hey! I’ve worked on interactive data tables quite a bit, and adding basic navigation is super straightforward. If every row leads to the same place, just use jQuery and set window.location.href on click like this:

$('tr').click(function () {
    window.location.href = 'https://example.com/read_message.php';
});

This is a solid way to implement simple javascript navigate to url functionality without having to use anchor tags everywhere. Just remember if your row includes buttons or form inputs, make sure to call event.stopPropagation() on those so the navigation doesn’t trigger unintentionally.

3

Yep, totally agree with Dimple used that approach myself. But if you’re working with dynamic destinations (like different rows leading to different detail pages), here’s a slightly more flexible approach I use in one of my dashboards.

You can store the target URL in a data-url attribute on each <tr>:

<tr data-url="read_message.php?id=123">...</tr>

$('tr').click(function () {
    const targetURL = $(this).data('url');
    if (targetURL) {
        window.location.href = targetURL;
    }
});

This makes the script reusable across all your rows, each pointing to its own destination. It’s a dynamic and clean way to handle javascript navigate to url behavior without hardcoding links in the JS.

4

Great points from both of you! I’ll add another perspective—especially if you’re thinking about accessibility and semantic HTML.

Instead of handling everything in JavaScript, you can wrap the row content inside an anchor element and make the entire row look and behave like it’s clickable. Something like this:

<tr>
  <td>
    <a href="read_message.php?id=123" style="display:block; text-decoration:none; color:inherit;">
      Row Content
    </a>
  </td>
</tr>

This way, your javascript navigate to url logic is partly handled natively by the browser, which is more accessible for screen readers and keyboard users. You can still apply hover styles to the <tr> or the <a> to keep things visually interactive. Sometimes letting HTML do the heavy lifting and using JS just for enhancements is a win-win.