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

[@MrHerome1]

Keep up the good work 👍

[@heismyke]

what an incredible teacher you are

[@ashmusic621]

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]

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]

we are expecting more like this.... 😍

[@CodeBand]

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

[@briandesign]

cool little project!

[@CodeBand]

Glad to hear that... :)

[@marimuthur9456]

Excellent trick 👌🏼👌🏼👌

[@CodeBand]

Thank you!

[@rcode2023]

thanks bro, you save my life

[@akunnaebehekennia6766]

could you explain more about selecting across multiple columns? I have 6 columns i need to filter through and i followed your code but it only filters the first column. Urgent please! i present my app tomorrow😓

[@prhasn]

Excellent tips. Thank you.

[@CodeBand]

Very glad to hear that😊

[@nicholasandrew9736]

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

[@CodeBand]

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)

[@KENs_Daily_Adventure]

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

[@mdshohanislam807]

esay way to learning thanks

[@CodeBand]

Thanks a lot...

[@CreativeTutorialsWeb]

Thanks so much for solving my issue 😍

[@CodeBand]

No problem 😊

[@glupiajak]

That's pretty amazing, thanks

[@CodeBand]

Glad to hear that...keep going😊

[@FinbarAllanUCD]

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]

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

[@omkhatri261]

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]

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

[@putramelanda1117]

How to select the second td(column) ?

[@CodeBand]

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.

[@vivianokpara]

thank you so much

[@khantausif3329]

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

[@CodeBand]

Sorry for the late reply, was this fixed ?

[@khantausif3329]

@@CodeBand nope!

[@mfsdrawings8600]

Nice👍🏻👍🏻❤️

[@CodeBand]

Thanks :)

[@rodrigocabotajejr6214]

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

[@CodeBand]

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

[@marvinsantillan8367]

How to get multiple columns?

[@CodeBand]

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

[@rangabharath4253]

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]

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]

@@CodeBand thank you

[@putramelanda1117]

How to select the second td(column)

[@CodeBand]

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]

Awesome

[@CodeBand]

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

[@thearmor9231]

Nice video

[@CodeBand]

Thanks😊

[@kakanadwani8525]

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]

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.

[@rameshgywali2809]

thanks

[@CodeBand]

:)

[@jml6512]

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

[@CodeBand]

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

[@creatorboy4901]

not-working

[@CodeBand]

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

[@arshavin96ru]

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

[@luciusseneca9162]

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]

Thanks for the tip :)

[@CodeBand]

@Lucius Seneca, glad to hear that :)

[@zvalor246]

Nice video