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

Поделиться
HTML-код
  • Опубликовано: 19 дек 2024

Комментарии • 54

  • @dcode-software
    @dcode-software  5 лет назад +4

    Check out my video on event delegation here:
    ruclips.net/video/pKzf80F3O0U/видео.html

    • @kilavuzyeminlitercume4724
      @kilavuzyeminlitercume4724 4 года назад

      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!

  • @XnecromungerX
    @XnecromungerX 5 лет назад +1

    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.

    • @dcode-software
      @dcode-software  5 лет назад

      Yeah, if you find a way to do it definitely post it here as a comment 😁

    • @dcode-software
      @dcode-software  5 лет назад

      I've seen people create "tables" using flex box though, so that's an option

  • @HaiderYTpro
    @HaiderYTpro 5 лет назад +3

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

  • @jmctx2005
    @jmctx2005 2 года назад

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

  • @austinethridge2771
    @austinethridge2771 4 года назад +1

    THANK YOU! Now my website works as I intended it to

  • @arunkutz
    @arunkutz 3 года назад

    I am not very familiar with HTML, Did what you just explained in the very begining :D
    Very Helpful ... Thank you for the video :)

  • @TomasMisura
    @TomasMisura 4 года назад

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

  • @sabrinafeliz4822
    @sabrinafeliz4822 3 года назад +1

    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

  • @MichaelKuenzle
    @MichaelKuenzle 2 года назад

    Very well explained. Thank you very much.

  • @DullFiction
    @DullFiction 5 лет назад +2

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

  • @muhammadtauqeer9047
    @muhammadtauqeer9047 2 года назад

    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

  • @JobinJohnsonArtwork
    @JobinJohnsonArtwork 2 года назад

    Hello Sir I'm having trouble in
    Changing first row into table header using in this html

  • @mg_slang
    @mg_slang 4 года назад +1

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

    • @dcode-software
      @dcode-software  4 года назад +1

      I don't have any tutorials on that just yet, sorry :(

  • @Crhistianosa
    @Crhistianosa 4 года назад

    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?

    • @Crhistianosa
      @Crhistianosa 4 года назад

      @Deepak kumar Jangid Yes. My co-worker developed code that worked.

  • @PopeJareth
    @PopeJareth 2 года назад +1

    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?

    • @klenisarapaj3706
      @klenisarapaj3706 7 месяцев назад

      I have the same question did you find a way to do that?

    • @PopeJareth
      @PopeJareth 7 месяцев назад

      @@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.

  • @lapis1134
    @lapis1134 Год назад

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

  • @luchobal2
    @luchobal2 4 года назад +1

    how can I do this with dinamic table?

  • @sunidhimistry488
    @sunidhimistry488 4 года назад

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

  • @Yoggan0
    @Yoggan0 4 года назад

    What theme are you using for VS Code?

  • @danieloniha7581
    @danieloniha7581 2 года назад

    how is your vs code that fine and clean

  • @myriamrodriguez9185
    @myriamrodriguez9185 4 года назад +2

    You're my hero, thank you

  • @manivelarung
    @manivelarung 4 года назад

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

  • @yudishyuds2252
    @yudishyuds2252 2 года назад

    @dcode hi, just like you shown. How to make a cell clickable??

  • @tavanogrim
    @tavanogrim 11 месяцев назад

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

  • @tashnung
    @tashnung 2 месяца назад

    Very cool, thank you...

  • @bernhardschonberger5770
    @bernhardschonberger5770 4 года назад +1

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

  • @monstermunch147
    @monstermunch147 3 года назад +2

    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?

  • @thekingdeeno
    @thekingdeeno Год назад

    Thanks a lot bro

  • @mihirmakwana5942
    @mihirmakwana5942 4 года назад

    i'm getting error:
    $ is not defined

  • @muhammadtaymoor3625
    @muhammadtaymoor3625 11 месяцев назад

    rows.forEach is not a function is printed in console

  • @filmsfox9988
    @filmsfox9988 4 года назад

    thanks it is running

  • @kasi1846
    @kasi1846 5 лет назад

    How do I write these functions without arrows?

  • @christopherjung2697
    @christopherjung2697 4 года назад +1

    thanks

  • @Enzzogabriell
    @Enzzogabriell 3 года назад

    Tanks so much

  • @JohanRonsse
    @JohanRonsse 3 года назад

    This method is not accessible. I would not do it this way.