Make your table rows clickable (with a link) - Web Design Tutorial
Вставка
- Опубліковано 19 вер 2024
- 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:
/ 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!
#dcode #javascript #css
![How To Display Selected HTML Table Row Values Into Input Text Using JavaScript [ with Source code ]](/img/n.gif)
Check out my video on event delegation here:
ua-cam.com/video/pKzf80F3O0U/v-deo.html
Thank you for this wonderful tutorial.
However I want to let you know that (in my case) this.dataset.href returns undefined and therefore cannot open a link.
So I had to change that line as "this.getAttribute("data-ref")" and then it worked.
HTH!
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 elements for all the inbuilt functionality of browsers.
Yeah, if you find a way to do it definitely post it here as a comment 😁
I've seen people create "tables" using flex box though, so that's an option
your way of teaching is so amazing... steps to guide wonderful
No worries mate!!
Bro!!! you sound like Korg from Thor hahah epic! are you trying to start a revolution? hahaha
THANK YOU! Now my website works as I intended it to
No problem at all, cheers!
I am not very familiar with HTML, Did what you just explained in the very begining :D
Very Helpful ... Thank you for the video :)
Hello Sir I'm having trouble in
Changing first row into table header using in this html
You're my hero, thank you
Very well explained. Thank you very much.
I have found this code and immedialtely used it for my puprposes. Thanks a lot :)
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
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?
I have the same question did you find a way to do that?
@@klenisarapaj3706 I did not, mostly because I had to move on. I settled for an anchor tag in each cell that was rigged to occupy the full cell size. The downside to this method is the cell borders, if you have any, are not links.
looking for a DataTable in PrimeVue where I can make a cell Value a link to route to another page which contains a form. The Data in the Column is coming from .NET using ajax GET API. we can also use axios. problem is with tag or directive which is a wrapper on table column by PrimeVue. doesn't accept anchor tags. anchor tags inside tags. doesnt convert the value into a link. who can help
Thanks a lot bro
Happy to help
is there no other way of doing this w/o js?
Hi Dom. Do you have any tutorial on the Strava API. I'm struggling to create their webhook. Can you help?
I don't have any tutorials on that just yet, sorry :(
how can I do this with dinamic table?
I have an online spreadsheet on google and created an html page that shows the spreadsheet table. The problem is that the contents of a column are links and the html table does not show those clickable links. I have found many solutions on the internet, but all of them are including a fixed link in the code. My table receives data and each row has a different link. How can I do this?
@Deepak kumar Jangid Yes. My co-worker developed code that worked.
how to do it using VUE JS sir? when i console the rows, nothing show :(
When the webpage reloads, it loses everything/data you added through console.. is there any way to stop losing it?
What theme are you using for VS Code?
very bad for google-bot, try to use css (display: table|table-row|table-column) instead
thanks it is running
how is your vs code that fine and clean
@dcode hi, just like you shown. How to make a cell clickable??
can you do this only with php and html ???
thanks
No problem.
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?
My worries too
rows.forEach is not a function is printed in console
how to make the click event to open new page instead of replacing the current page?
_blank
Tanks so much
You're welcome !
i'm getting error:
$ is not defined
jQuery is not loading into your page correctly
This method is not accessible. I would not do it this way.
How do I write these functions without arrows?
function () {
}
Thanks