JavaScript Filter Table | No jQuery | Vanilla JavaScript |JavaScript Search Filter |JS Filter Search

Поділитися
Вставка
  • Опубліковано 11 лис 2024

КОМЕНТАРІ • 61

  • @AskeenHerome
    @AskeenHerome Годину тому

    Keep up the good work 👍

  • @heismyke
    @heismyke Рік тому

    what an incredible teacher you are

  • @ashmusic621
    @ashmusic621 4 роки тому +2

    2K+ subscribers? This channel deserves at least 200K, One of the most underrated channels. Great for beginners like me, The JS loops are explained in a great way. Expecting more beginner projects in JS & PHP in future. Subscribed!

    • @CodeBand
      @CodeBand  4 роки тому +2

      So glad to hear that... Thanks a lot for the support and lets make it 200k❤️❤️❤️
      Definitely will keep up with more beginner projects in future...😊

  • @ijassubair7983
    @ijassubair7983 4 роки тому +2

    we are expecting more like this.... 😍

    • @CodeBand
      @CodeBand  4 роки тому +2

      Sure, will definitely post some cool JS stuffs... Thanks a lot and keep supporting... :)

  • @rcode2023
    @rcode2023 Рік тому

    thanks bro, you save my life

  • @mdshohanislam807
    @mdshohanislam807 2 роки тому +1

    esay way to learning thanks

  • @marimuthur9456
    @marimuthur9456 2 роки тому +1

    Excellent trick 👌🏼👌🏼👌

  • @briandesign
    @briandesign 4 роки тому +2

    cool little project!

    • @CodeBand
      @CodeBand  4 роки тому +1

      Glad to hear that... :)

  • @prhasn
    @prhasn 3 роки тому +1

    Excellent tips. Thank you.

    • @CodeBand
      @CodeBand  3 роки тому +1

      Very glad to hear that😊

  • @vivianokpara
    @vivianokpara 3 місяці тому

    thank you so much

  • @KENs_Daily_Adventure
    @KENs_Daily_Adventure Рік тому

    May I know why "startsWith(q)", meaning

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 2 роки тому

    Thanks so much for solving my issue 😍

  • @nicholasandrew9736
    @nicholasandrew9736 2 роки тому +2

    Hi, what is the logic if i want to search through all the columns? Thank you in advance!

    • @CodeBand
      @CodeBand  2 роки тому +1

      You can use Logical OR operator to filter based on multiple columns... (querySelectorAll('td') will give you all three columns from which you can get the first item using index 0 and so on)

  • @omkhatri261
    @omkhatri261 Рік тому +1

    How to search any element in table by all column you can search only one column element, how we can search all column element. Please help me to solve this problem.

    • @CodeBand
      @CodeBand  Рік тому +1

      Sorry for the late reply...
      We can easily do that with some OR conditions.

  • @FinbarAllanUCD
    @FinbarAllanUCD 2 роки тому +1

    I'm trying to add three inputs as filters for each of the three rows so that I can filter multiple columns with multiple inputs, any idea how I could update the script to achieve this?

    • @CodeBand
      @CodeBand  Рік тому +1

      Sorry for the late reply...
      You figured it out ?
      You can pretty much do that with OR/AND statements.

  • @glupiajak
    @glupiajak 3 роки тому +1

    That's pretty amazing, thanks

    • @CodeBand
      @CodeBand  3 роки тому +1

      Glad to hear that...keep going😊

  • @rameshgywali2809
    @rameshgywali2809 2 роки тому +1

    thanks

  • @marvinsantillan8367
    @marvinsantillan8367 2 роки тому +1

    How to get multiple columns?

    • @CodeBand
      @CodeBand  2 роки тому +1

      Sorry for the late reply...
      You mean to filter using multiple columns ?

  • @khantausif3329
    @khantausif3329 2 роки тому +1

    getting error
    Uncaught TypeError: Cannot read properties of null (reading 'textContent').

    • @CodeBand
      @CodeBand  2 роки тому +1

      Sorry for the late reply, was this fixed ?

    • @khantausif3329
      @khantausif3329 2 роки тому

      @@CodeBand nope!

  • @rangabharath4253
    @rangabharath4253 4 роки тому +1

    awesome. What is display = table-row. I didn't understand that part ? Y u used table-row instead of display:block; Please clarify this doubt. Thank u so much.

    • @CodeBand
      @CodeBand  4 роки тому +2

      table-row is actually meant for the row in a table as the name suggests, which means its used for table rows specifically, whereas block is generally used.

    • @rangabharath4253
      @rangabharath4253 4 роки тому

      @@CodeBand thank you

  • @putramelanda1117
    @putramelanda1117 4 роки тому +2

    How to select the second td(column) ?

    • @CodeBand
      @CodeBand  4 роки тому +1

      If you mean to search by second column instead of the name col, its not that hard, change the logic slightly like,
      document.querySelectorAll('td')[1]
      querySelector used in the video will only take the first element that matches the selector whereas querySelectorAll will fetch all the elements that match the criteria, so in this case, it will fetch 3 elements, because we have 3 tds, and your requirement is second td, and so the index 1.

  • @salimkachemela
    @salimkachemela 4 роки тому +1

    Awesome

    • @CodeBand
      @CodeBand  4 роки тому +1

      Thanks a lot brother...keep supporting... :)

  • @rodrigocabotajejr6214
    @rodrigocabotajejr6214 3 роки тому +1

    Is this also working even your searching is on the other page of pagination?

    • @CodeBand
      @CodeBand  3 роки тому +1

      It depends on how the pagination is done...
      And of course, you can fine tune the code in the way you wish to...😊

  • @mfsdrawings8600
    @mfsdrawings8600 4 роки тому +1

    Nice👍🏻👍🏻❤️

  • @thearmor9231
    @thearmor9231 3 роки тому +1

    Nice video

  • @kakanadwani8525
    @kakanadwani8525 4 роки тому +2

    Hi, I had a question maybe you can solve it. I want to create multiple search box filters and return the value with respect to the values that satisfy the value of all the search boxes. It would be great if you teach us

    • @CodeBand
      @CodeBand  4 роки тому +1

      That's a great suggestion, and I may do it in the future. But, believe me, It's pretty much simple to do that as well. This video + some research in Google and Stackoverflow will give you the solution.

  • @putramelanda1117
    @putramelanda1117 4 роки тому +1

    How to select the second td(column)

    • @CodeBand
      @CodeBand  4 роки тому +1

      If you mean to search by second column instead of the name col, its not that hard, change the logic slightly like,
      document.querySelectorAll('td')[1]
      querySelector used in the video will only take the first element that matches the selector whereas querySelectorAll will fetch all the elements that match the criteria, so in this case, it will fetch 3 elements, because we have 3 tds, and your requirement is second td, and so the index 1.

  • @jml6512
    @jml6512 3 роки тому +1

    I got the error script.js:9 Uncaught TypeError: Cannot read properties of null (reading 'textContent')

    • @CodeBand
      @CodeBand  3 роки тому +2

      Which means you're not getting that td element...
      Please consider checking your html structure again...

  • @creatorboy4901
    @creatorboy4901 2 роки тому +1

    not-working

    • @CodeBand
      @CodeBand  2 роки тому +1

      Sorry for the late reply....
      What's the error ?

  • @arshavin96ru
    @arshavin96ru Рік тому +1

    Nice code dude, but you could drop that funny accent)). It's fine to use your native accent.

    • @luciusseneca9162
      @luciusseneca9162 Рік тому +1

      Don't know what you are talking about my dude. Accent was good. As a native speaker, had an easy time understanding his video.

    • @CodeBand
      @CodeBand  Рік тому +1

      Thanks for the tip :)

    • @CodeBand
      @CodeBand  Рік тому +1

      @Lucius Seneca, glad to hear that :)

  • @zvalor246
    @zvalor246 4 місяці тому

    Nice video