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:

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!

#dcode #javascript #css

[dcode-software]

Check out my video on event delegation here:

[HaiderYTpro]

your way of teaching is so amazing... steps to guide wonderful

[XnecromungerX]

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.

[arunkutz]

I am not very familiar with HTML, Did what you just explained in the very begining :D

Very Helpful ... Thank you for the video :)

[MichaelKuenzle]

Very well explained. Thank you very much.

[jmctx]

Bro!!! you sound like Korg from Thor hahah epic! are you trying to start a revolution? hahaha

[TomasMisura]

I have found this code and immedialtely used it for my puprposes. Thanks a lot :)

[sabrinafeliz]

hello sir please can you help me to find how to make table layout clickable(when i click in table layout the tablerow will be selected ) in android . i work in android studio thanks

[DullFiction]

is there no other way of doing this w/o js?

[bernhardschonberger]

very bad for google-bot, try to use css (display: table|table-row|table-column) instead

[PopeJareth]

This was a great video, thank you for making it! What if you want to have a different anchor tag link in one of your cells, how do you keep the row click from going first?

[lapis]

how to do it using VUE JS sir? when i console the rows, nothing show :(

[sunidhimistry]

When the webpage reloads, it loses everything/data you added through console.. is there any way to stop losing it?

[muhammadtaymoor]

rows.forEach is not a function is printed in console

[mg_slang]

Hi Dom. Do you have any tutorial on the Strava API. I'm struggling to create their webhook. Can you help?

[tavanogrim]

can you do this only with php and html ???

[danieloniha]

how is your vs code that fine and clean

[manivelarung]

how to make the click event to open new page instead of replacing the current page?

[monstermunch]

Curious if this would have an impact on screen readers? Has any one looked into this? Screen readers rely on html being semantic so it is able to translate the content to the user. Doesn't adding the anchor in that way frankenstein what's understood to be a table?

[mihirmakwana]

i'm getting error:
$ is not defined