Website marketing using high authority backlinks from popular website's, find out more at webcentreplus.com or email colin@webcentreplus.com
Click Here!

Make your table rows clickable (with a link) – Web Design Tutorial

As you cannot make an entire table row (tr) clickable (or linkable) using plain HTML, we need to resort to JavaScript in order to achieve this effect.

In this video we’ll be looking at a technique to get around this using JavaScript, event listeners, delegated event listeners and some optional jQuery.

Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!

Follow me on Twitter @dcode!

If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

source – For all your website needs, visit out Spalding Web Design

3 Responses to Make your table rows clickable (with a link) – Web Design Tutorial

  • dcode says:

    Check out my video on event delegation here:


  • Coder Boy says:

    What is your vs code theme

  • I was excited to watch this one because you mention "with a link" iv generated a lot of tables in my time and wondered how you got the tr to act as an anchor.
    The reason this would be amazing is because you would capture all the accessibility functions of anchors and be able to middle mouse the link for a new tab and being able to drag the link ect.
    But here we just have a tr with an onclick callback to a link.

    Still good stuff and good tutorial! im just still searching for a way to get those tr's to actually just be anchors or <a> elements for all the inbuilt functionality of browsers.

Leave a Reply

Archives