Это видео недоступно.
Сожалеем об этом.
JavaScript Filter Table | No jQuery | Vanilla JavaScript |JavaScript Search Filter |JS Filter Search
HTML-код
- Опубликовано: 18 июн 2020
- **Join on Code Band Official Community**
Telegram Channel : t.me/codebandcommunity
Whatsapp Group : chat.whatsapp....
***
In this video, I'm gonna be showing you how to filter table based on user input in JavaScript. We will make a table and an input search bar and if the user starts to type in the search bar, the table gets dynamically filtered based on the user input data. We will be using pure vanilla js. We will not be using any external libraries like jQuery and all.
Subscribe | Code Band
Github Repo : github.com/akj...
Other videos in Code Band:
console.table JavaScript | Example | JavaScript Arrays | JavaScript Objects | JS Array of Objects : • console.table JavaScri...
Instagram Automation using Python : • Instagram Automation u...
Top 5 Programming Languages to Learn in 2020 : • Top 5 Programming Lang...
:) You Can Find Me On:
My Website - jasim.tech/
Linkedin - / akjasim
Github - github.com/akj...
Facebook - / jasimakjasim
Twitter - / akjasim
Instagram - / jasim_ak
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!
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...😊
what an incredible teacher you are
we are expecting more like this.... 😍
Sure, will definitely post some cool JS stuffs... Thanks a lot and keep supporting... :)
Nice video
cool little project!
Glad to hear that... :)
thank you so much
Excellent trick 👌🏼👌🏼👌
Thank you!
esay way to learning thanks
Thanks a lot...
thanks bro, you save my life
Excellent tips. Thank you.
Very glad to hear that😊
Hi, what is the logic if i want to search through all the columns? Thank you in advance!
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)
That's pretty amazing, thanks
Glad to hear that...keep going😊
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.
Sorry for the late reply...
We can easily do that with some OR conditions.
thanks
:)
Thanks so much for solving my issue 😍
No problem 😊
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?
Sorry for the late reply...
You figured it out ?
You can pretty much do that with OR/AND statements.
May I know why "startsWith(q)", meaning
Nice👍🏻👍🏻❤️
Thanks :)
Awesome
Thanks a lot brother...keep supporting... :)
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.
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.
@@CodeBand thank you
Is this also working even your searching is on the other page of pagination?
It depends on how the pagination is done...
And of course, you can fine tune the code in the way you wish to...😊
How to select the second td(column) ?
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.
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
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.
How to get multiple columns?
Sorry for the late reply...
You mean to filter using multiple columns ?
getting error
Uncaught TypeError: Cannot read properties of null (reading 'textContent').
Sorry for the late reply, was this fixed ?
@@CodeBand nope!
How to select the second td(column)
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.
Nice code dude, but you could drop that funny accent)). It's fine to use your native accent.
Don't know what you are talking about my dude. Accent was good. As a native speaker, had an easy time understanding his video.
Thanks for the tip :)
@Lucius Seneca, glad to hear that :)
I got the error script.js:9 Uncaught TypeError: Cannot read properties of null (reading 'textContent')
Which means you're not getting that td element...
Please consider checking your html structure again...
not-working
Sorry for the late reply....
What's the error ?
Nice video
Thanks😊